31 January 2015

Download Template Scren Blue

Assalamu alaykum wr br apa kabar semua teman...sore ini Mas Hidayatd akan share template yang super keren cantik imuut lagi..
untuk template yang satu ini saya tidak ada komen ,yang jelas sampean-sampean semua pasti pada suka ...nggak percaya..?

Fitur-Fitur dari Scren Blue Blogger Template
  1. Responsive blogger Template.
  2. Scren Blue Search Result dengan Ajax sehingga loadingnya lebih cepat.
  3. Costum CSS lightbox blogger.
  4. Related Post/Artikel terkait dengan Ajax sehingga loadingnya agak cepat(script saya modifikasi sesuai templatenya).
  5. 2 jenis Menu yaitu Normal Menu dan Mobile Menu (pada mobile menu menggunakan pagemenu sehingga menu tampil rata tengah)
  6. Optimasi SEO.
  7. Support modern browser IE9, Mozilla, Chrome
  8. Breadcrumb
  9. Fully Customizable
  10. Auto Readmore
  11. Popular Post
  12. Related articles Custom Mobile
  13. hare Buttons
  14. Page Navigation Custom Mobile { lihat gambar demo }


DOWNLOAD | DEMO
http://syarif-hidayatd.blogspot.com

30 January 2015

Cara Membuat Tombol Back To Top

Kembali ke atas itu kata lain dari Tombol Back to Top, Fungsi Tombol Back to Top berguna untuk mempercepat pembaca artikel blog supaya tidak direpotkan dengan scroll keatas

Mungkin artikel tentang membuat tombol back to top atau kembali keatas ini sudah banyak berkeliaran di luar sono , tapi kali ini admin memutuskan untuk tetap membuat artikel ini, siapa tahu ada mantan-mantan pacar Mas Hidayatd dulu ada yang belum tahu he..he.. he.., dan mungkin juga suka dengan tombol yang admin sediakan disini.
Contoh demonya seperti blog ini, sebelah kiri bawah..

cara-caranya ikuti saja seperti penjelasan di bawah ...monggo...

letakkan kode CSS berikut ini di atas kode */]]></b:skin>


/*---back to top bikinan Mas Hidayatd---*/
#back-to-top {}
.back-to-top {
position:fixed !important;
position:absolute;
bottom:10px;
right:10px;
z-index:999;
}

kemudian copas kode script berikut di atas kode </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'><img src='http://1.bp.blogspot.com/-78pHff3PtJ0/VMxp9zSexNI/AAAAAAAABZs/twysVs0-Cf4/s1600/back_to_top_bikinan_mas_hidayatd.png'/>
<i class='fa fa-chevron-up'/>
</a></div>
<script>            
$(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        $(&#39;#back-to-top&#39;).fadeIn();
    } else {
        $(&#39;#back-to-top&#39;).fadeOut();
    }
});

$(&#39;#back-to-top&#39;).hide().click(function() {
    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
    return false;
});
</script>


silahkan ubah warna Back to top yang kalian sukai dengan mengganti tulisan

<img src='http://1.bp.blogspot.com/-78pHff3PtJ0/VMxp9zSexNI/AAAAAAAABZs/twysVs0-Cf4/s1600/back_to_top_bikinan_mas_hidayatd.png'/>

pada baris nomer satu diatas

warna biru
<img    src='http://1.bp.blogspot.com/-78pHff3PtJ0/VMxp9zSexNI/AAAAAAAABZs/twysVs0-Cf4/s1600/back_to_top_bikinan_mas_hidayatd.png'/>

warna hijau
<img    src='http://1.bp.blogspot.com/-j_acKAWqW6U/VMxsyhT2lDI/AAAAAAAABZ4/oIoo7W_ocNs/s1600/back_to_top_001_bikinan_mas_hidayatd.png'/>

warna oranges
<img    src='http://3.bp.blogspot.com/-LfBX9Yy0M2Y/VMxs2clO1xI/AAAAAAAABaA/IDI56uq9Ijg/s1600/back_to_top_002_bikinan_mas_hidayatd.png'/>

warna hitam
<img    src='http://4.bp.blogspot.com/-lSCJzmzHm4E/VMxw_ziOw5I/AAAAAAAABaU/02sPQK1ROtM/s1600/back_to_top_003_bikinan_mas_hidayatd.png'/>


oky para pengunjung yang saya cintai ...preeeet
itulah secuil ilmu yang saya bagikan mudah-mudahan tidak bermanfaat ...ooops trimakasih ketemu lagi di posting berikutnya....
http://syarif-hidayatd.blogspot.com

28 January 2015

Cara memilih tipe template responsive

Seperti yang kita sudah ketahui ,Bahwa di dalam dunia website sangat lah banyak para blogger kita yang membagikan template di situs internet baik itu dari hasil karyanya maupun dari situs lain, dari sekian banyaknya template tersebut tentu banyak pula tipe-tipe dan seberapa jauh presentasi kemampuan volume responsive daripada template itu sendiri.

Disisi lain, para blogger pemula khususnya mereka asyik dengan suguhan-suguhan berbagai macam Template yang super renyah imut ramping dan modif , mereka bebas memungut dan memborong template itu lalu di kantongi kemudian di bawa pulang yang nantinya akan di instal dan sebagian untuk colleksi file templatenya…..lalu ada masalah dan pertanyaan yang timbul, cara dan tipe seperti apa untuk mendapat kan template yang lebih dari kata responsive , baik responsive di tampilan desktop lebih-lebih tampilan browser mobile ,

Tidak sedikit mereka si blogger pemula yang sering bergonta-ganti template yang kelewat banyaknya mereka justru malah bingung dan di buat pusing oleh template-template genit itu… woow kasihan ya.. lalu bagaimana solusinya..? oky tenangkan pikiran anda dan duduk santailah sejenak di hadapan komputer anda…! Saya Mas Hidayatd akan menguraikan sebuah cara yang jitu simple dan masuk akal …

Untuk mengetahui sebuah Template yang responsive harus di akses melalui browaer seluler , karna template di tampilan desktop jelas tidak ada masalah . terkadang kita merasa tertipu dengan tampilan template yang kita instal jika di lihat di tampilan desktop yang begitu menarik elegan bak template profesional dan di tambah lagi dari sang pembuatnya katanya tempale tersebut responsive, tapi apa yang terjadi tamplan template itu tidak sesuai dengan yang kita harapkan jika blog di lihat via browser mobile…,kenapa untuk mengukur sebuah template responsive harus melalui browser mobile ..?ya memang seharusnya begitu ,karna berdasarkan dari tingkat pengunjung lebih banyak 70 % melalui browser seluler di banding via dekstop .

baik para pengunjung anda semua mungkin sudah pada tahu tentang penjelasan di atas....sepertinya terlalu panjang niih


.


Oke silahkan baca dan pahami cara-cara berikut ini..!
  1. Untuk mengetahui Template yang responsive petama-tama anda memilih satu dari colleksi template di folder anda, lalu instal
  2. Pastikan template anda sudah di atur ke Tempalte seluler ( KHUSUS )
  3. Lihat di tampilan Dekstop , lalu
  4. Inilah yang paling dominan , Lihat dan perhatikan template blog anda di browser seluler mulai dari menu atas sampai ke bagian Fotter paling bawah.
  5. Perhatikan di bagian Menu apakah menu tersebut responsive secara otomstis
  6. Teliti gambar-gambar di blog anda , coba rubah posisi ponsel anda yang tadinya berdiri menjadi miring .
    apakah ada gambar yang terpotong ,atau gambar full scren menyesuiakan lebar layar ponsel
  7. Selesai


kesimpulannya jika di browser seluler menu template diblog anda tidak menyesuakan secara otomatis atau sebagian ada gambar yang terpotong ,gambar tidak full scren menyesuiakan lebar layar ponsel, berarti Template tersebut tidak responsive Nah itulah tadi cara dan tips untuk mengetahui template responsive, perlu saya tambah kan untuk mendapatkan Template yang responsive anda bisa melihat contoh dan demo di blog ini via seluler , responsive bukan..? Dan untuk menghasilkan templte yang responsive anda bisa mendownload Template Free di blog ini , trimakasih ….
http://syarif-hidayatd.blogspot.com

22 January 2015

Download Template Bokong Bysulen

Halo apa kabar bolo-bolo kwabeh ...?kembali saya bagi-bagi Template baru niih... Template siapa lagi kalau bukan bikinan Mas Hidayatd,
yang satu ini mungkin pada sebagian orang akan bertanya-tanya soal nama template ini , template
Bokong Bysulen
nama yang asal-asalan terkesan tidak modern....ketinggalan zaman ...ndeso.! ha ..ha...ha..walaupun begitu template ini setidaknya bisa bikin modal untuk menjadikan blog anda menjadi blog yang unik SEO ringan LOADING 1000 persen responsiv , dan sudah saya buktikan dengan mengakses di beberapa browser seluler dan hasilnya luar biasa, oky saya sudah kehabisan komen nih langsung saja anda download dan silahkan sampean instal di blog anda...!



berikut spesifik Template nya

  1. 1000% Responsive
  2. Custom Mobile Template
  3. SEO Optimized
  4. Ad and AdSense Optimized
  5. Breadcrumb
  6. Fully Customizable
  7. Auto Readmore
  8. Popular Post
  9. Related articles
  10. Share Buttons plus animasi
DOWNLOAD | DEMO | DETIL

Cara membuat tombol share button versi Mas Hidayatd

Cara Terbaru dan populer membuat tombol share button saat ini adalah Tombol Share di bawah postingan seperti Template
Setengah Jadi,Sakit Hati,Jeritan Hati
dan masih banyak yang lainnya .Ada banyak cara untuk membuat tombol share button yang dapat kita pasang di blog kita ,baik itu menggunakan java script maupun menggunakan kode kode yang lain

Kali ini saya akan bagikan bagaimana cara untuk membuat tombol share button di blog yang letaknya dibawah postingan , tombol share ini merupakan hasil inisiatif saya sendiri yang memang sebelumya telah memakan waktu berbulan-bulan bahkan berabad-abad untuk pengeditan ...he..he..he..bercanda mas bro dan hasil memang sangat luar biasa .., dan yang unik lagi tombol share ini agak sedikit berbeda lho dengan Tombol Share yang katanya seperti Template Blog Evo Magz....Ohya mas bro seperti apa tampilan tombol share button yang kita bahas ini ,,penasaran ? oky langsung saja kita pergi bareng bareng ke TKP untuk melihat dan mengikuti

Cara membuat tombol Share plus animasi keren...

Berikut Cara Membuat Tombol Share Keren dari yang sudah keren
  • Seperti biasanya , masuk dulu ke editor template html







  • Pasang kode css berikut tepat di atas ]]</b:skin> atau </style>






  • /* share buttons Mas Hidayatd*/
    .share-buttons-box {
    height: 67px;
    background: url(http://1.bp.blogspot.com/-pZIi9nsJG9M/VKBq9eUihXI/AAAAAAAABF4/hye058whD1I/s1600/Mas%2BHidayatd.gif) no-repeat 330px 10px;
    margin:20px 0 15px;
    overflow:hidden;
    }
    .share-buttons {
    margin:0 0;
    height:67px;
    float:left;
    }
    .share-buttons .share {
    float:left;
    margin-right:10px;
    display:inline-block;
    }
    /* error and search */
    .status-msg-wrap {
    font-size:120%;
    font-weight:bold;
    width:100%;
    margin:20px auto;
    }
    .status-msg-body {
    padding:20px 2%;
    width:96%;
    }
    .status-msg-border {
    border:1px solid #e5e5e5;
    opacity:10;
    width:auto;
    }
    .status-msg-bg {
    background-color:#ffffff;
    }
    .status-msg-hidden {
    padding:20px 2%;
    }
    


  • Kemudian cari lagi kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )






  • Setelah ketemu kode diatas kemudian pasang script dibawah ini tepat dibawah kode  <data:post.body/>







  • atau bisa juga sobat letakkan di atas kode Artikel terkait seperti yang saya jelaskan pada postingan beberapa waktu lalu yaitu Cara membuat artikel terkait mirip evo Magz

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    
    <!-- Scripts Start -->
    <b:if cond='data:post.isFirstPost'>
    <!-- Facebook -->
    <div id='fb-root'/>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    </script>
    <!-- Google +1 -->
    <script type='text/javascript'>
    (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    <!-- Twitter -->
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
    </b:if>
    <!-- Scripts End -->
    
    
    <!-- Horizontal social buttons Start -->
    
            <div class='share-buttons-box'>
      <div class='share-buttons'>
       <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
       <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
       <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
       <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
       <div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
       lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div></div></div>
    
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
    </b:if>

  • Terkhir Simpan Template dan Lihat Hasilnya









  • jika Berhasil maka tombol share tadi akan seperti pada gambar diatas , atau pada share button yang saya pasang diblog ini( bila masih saya pasang ) hehheheheh , gimana mudahkan? jika ada kesulitan atau sobat gagal memasangnya silahkan kirim komentar ,saya Admin dengan senang hati akan berusaha membantu dan memberi solusinya...oky trimakasih salam blogger semuanya.


    http://syarif-hidayatd.blogspot.com

    Cara membuat tombol Share plus animasi keren

    Cara Terbaru dan populer membuat tombol share button saat ini adalah Tombol Share di bawah postingan seperti Template
    Setengah Jadi,Sakit Hati,Jeritan Hati
    dan masih banyak yang lainnya .Ada banyak cara untuk membuat tombol share button yang dapat kita pasang di blog kita ,baik itu menggunakan java script maupun menggunakan kode kode yang lain

    Kali ini saya akan bagikan bagaimana cara untuk membuat tombol share button di blog yang letaknya dibawah postingan , tombol share ini merupakan hasil inisiatif saya sendiri yang memang sebelumya telah memakan waktu berbulan-bulan bahkan berabad-abad untuk pengeditan ...he..he..he..bercanda mas bro dan hasil memang sangat luar biasa .., dan yang unik lagi tombol share ini agak sedikit berbeda lho dengan Tombol Share yang katanya seperti Template Blog Evo Magz....Ohya mas bro seperti apa tampilan tombol share button yang kita bahas ini ,,penasaran ? oky langsung saja kita pergi bareng bareng ke TKP untuk melihat dan mengikuti

    Cara membuat tombol Share plus animasi keren...



    nama gambar
    Ilustrasi tombol Share: © social media com


    Baca juga : Cara Terbaru Membuat Tombol Follow Twitter di Sidbar Blog

    Berikut Cara Membuat Tombol Share Keren dari yang sudah keren
  • Seperti biasanya , masuk dulu ke editor template html

  • Pasang kode css berikut tepat di atas ]]</b:skin> atau </style>


  • /* share buttons Mas Hidayatd*/
    .share-buttons-box {
    height: 67px;
    background: url(http://1.bp.blogspot.com/-pZIi9nsJG9M/VKBq9eUihXI/AAAAAAAABF4/hye058whD1I/s1600/Mas%2BHidayatd.gif) no-repeat 330px 10px;
    margin:20px 0 15px;
    overflow:hidden;
    }
    .share-buttons {
    margin:0 0;
    height:67px;
    float:left;
    }
    .share-buttons .share {
    float:left;
    margin-right:10px;
    display:inline-block;
    }
    /* error and search */
    .status-msg-wrap {
    font-size:120%;
    font-weight:bold;
    width:100%;
    margin:20px auto;
    }
    .status-msg-body {
    padding:20px 2%;
    width:96%;
    }
    .status-msg-border {
    border:1px solid #e5e5e5;
    opacity:10;
    width:auto;
    }
    .status-msg-bg {
    background-color:#ffffff;
    }
    .status-msg-hidden {
    padding:20px 2%;
    }
    

  • Kemudian cari lagi kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )




  • Setelah ketemu kode diatas kemudian pasang script dibawah ini tepat dibawah kode  <data:post.body/>




  • atau bisa juga sobat letakkan di atas kode Artikel terkait seperti yang saya jelaskan pada postingan beberapa waktu lalu yaitu Cara membuat artikel terkait
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    
    <!-- Scripts Start -->
    <b:if cond='data:post.isFirstPost'>
    <!-- Facebook -->
    <div id='fb-root'/>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    </script>
    <!-- Google +1 -->
    <script type='text/javascript'>
    (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    <!-- Twitter -->
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
    </b:if>
    <!-- Scripts End -->
    
    
    <!-- Horizontal social buttons Start -->
    
            <div class='share-buttons-box'>
      <div class='share-buttons'>
       <div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
       <div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
       <div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
       <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
       <div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
       lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div></div></div>
    
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
    </b:if>
  • Terkhir Simpan Template dan Lihat Hasilnya




  • Catatan:
    Pembuatan tombol Share atau pos terkait versi seluler, secara specsifik penempatan kodenya hampir sama ,screnshot anda bisa lihat blog ini atau blog mana saja, jika anda perhatikan di bagian bawah artikel blog tombol Share dan pos terkait posisinya berurutan dan biasanya tombol Share terletak dibagian bawah artikel kemudian diikuti menu post terkait

    jika Berhasil maka tombol share tadi akan seperti pada gambar diatas , atau pada share button yang saya pasang diblog ini( bila masih saya pasang ) hehheheheh , gimana mudahkan? jika ada kesulitan atau sobat gagal memasangnya silahkan kirim komentar ,saya Admin dengan senang hati akan berusaha membantu dan memberi solusinya...oky trimakasih salam blogger semuanya.

    Cara membuat popular post warna warni rata pinggir

    Sebenarnya cara membuat popular post warna warni di blog tidak sulit kok, dan kita tidak perlu menambahkan script apapun, kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada laman edit html , dan popular posts ini nantinya akan terlihat warna warni rata pinggir , pada sebagian temen temen blogger membagikan artikel popular postsnya kebanyakkan lebar di atas dan mengecil turun kebawah , lihat gambar

    Tutorial popular posts yang saya bagikan ini bisa dibilang lain dari yang lain, popular posts ini akan lebih rapi dan manis memanjakan mata jika dilihat karna tampilanya rata pinggir, lihat gambar
    Untuk lebih jelasnya silakan ikuti tutorial berikut.

    Cara pasang popular post warna warni rata pinggir di sidbar blog

    Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:
    1. Pertama pastikan anda sudah pasang widget poular post
    2. Kemudian pergi ke editor template [ edit html ]
    3. Pasang kode css ini diatas kode ]]></b:skin> atau </style>
      /*Popular Post Widget Mas Hidayatd*/
      .PopularPosts ul,
      .PopularPosts li,
      .PopularPosts li img,
      .PopularPosts li a,
      .PopularPosts li a img {
      margin:0 0;
      padding:0 0;
      list-style:none;
      border:none;
      background:none;
      outline:none;
      }
      .PopularPosts ul {
      margin:.5em 0;
      list-style:none;
      color:black;
      counter-reset:num;
      }
      .PopularPosts ul li img {
      display:block;
      margin:0 .5em 0 0;
      width:50px;
      height:50px;
      float:left;
      }
      .PopularPosts ul li {
      background-color:#eee;
      margin:0 10% .4em 0 !important;
      padding:.5em 1.5em .5em .5em !important;
      counter-increment:num;
      position:relative;
      }
      .PopularPosts ul li:before,
      .PopularPosts ul li .item-title a, .PopularPosts ul li a {
      font:normal  13px Fjalla One, Helvetica, Arial, sans-serif;
      color:#086D72 !important;
      text-decoration:none;
      }
      .PopularPosts ul li:before {
      content:counter(num) !important;
      display:block;
      position:absolute;
      background-color:#FFFFFF;
      color:#000000!important;
      width:22px;
      height:22px;
      line-height:22px;
      text-align:center;
      top:0px;
      right:0px;
      padding-right:0px !important;
      }
      /* Set color and level */
      .PopularPosts ul li:nth-child(1) {background-color:#20F415;margin-right:0% !important}
      .PopularPosts ul li:nth-child(2) {background-color:#12F89C;margin-right:0% !important}
      .PopularPosts ul li:nth-child(3) {background-color:#10AFF9;margin-right:0% !important}
      .PopularPosts ul li:nth-child(4) {background-color:#0B89FE;margin-right:0% !important}
      .PopularPosts ul li:nth-child(5) {background-color:#FCA22C;margin-right:0% !important}
      .PopularPosts ul li:nth-child(6) {background-color:#F631ED;margin-right:0% !important}
      .PopularPosts ul li:nth-child(7) {background-color:#F962C9;margin-right:0% !important}
      .PopularPosts ul li:nth-child(8) {background-color:#64F7A1;margin-right:0% !important}
      .PopularPosts ul li:nth-child(9) {background-color:#ECD788;margin-right:0% !important}
      .PopularPosts ul li:nth-child(10) {background-color:#B1F60E;margin-right:0% !important}
      .PopularPosts .item-thumbnail {
      margin:0 0 0 0;
      }
      .PopularPosts .item-snippet {
      font-size:12px;
      }
      
    4. Terkahir simpan template dan lihat hasilnya






    5. catatan ;
      jika sobat ingin merubah warna sesui warna yang kalian sukai silahkan ganti kode-kode warna
      dari baris (55) sampai (64) kode warna bisa lihat disini

      oky sekian dulu sampai disini tutorial saya mengenai Cara membuat popular posts warna warni rata pinggir di sidbar blog semoga bermanfaat dan mudah di fahami....

    18 January 2015

    Download Template Sakit Hati

    Halo apa kabar bolo-bolo kwabeh ...?kembali Mas Hidayatd mau berbagi template Free yang siap pakai untuk kalian semua , Template yang super keren dari yang udah keren...soal responsiv ..? ooooh pasti doong...Template siapa lagi kalau bukan bikinan Mas Hidayatd Orangnya..yang rajin ibadah rajin menabung .. ramah sumeh he.. he.. pokoknya seneng deh kalau ngomongin soal Mas Hidayatd , Oky mas brow Template ini awalnya pesanan dari seseorang salah satu temen sekantor ama saya yang saat itu lagi di tinggal kekasihnya selingkuh ...ooh kasihan yaa.. dia bilang katanya lagi SAKIT HATI. wooow tanpa pikir panjang saya langsung membukak Alqitab Laptop ...singkat cerita jadilah Template ini namanya SAKIT HATI he ..he,,dan Template ini saya rasa pantas di bagikan ke temen-temen yang ingin merubah blognya menjadi blog yang super keren dan mantaaaaap .

    Anda penasaran ..?seperti apa dan bagaimana template tersebut..?
    oky langsung saja ke pokok pembahasan yaitu Download Template SAKIT HATI ha..ha..ha.. ada-ada saja
    berikut spesifik Template

    SAKIT HATI

    1. 100% Responsive
    2. Custom Mobile Template
    3. SEO Optimized
    4. Ad and AdSense Optimized
    5. Breadcrumb
    6. Fully Customizable
    7. Auto Readmore
    8. Popular Post warna (warna bisa di edit sesuai selera, lihat keterangan di bawah)
    9. Related articles
    10. Related articles Custom Mobile
    11. Share Buttons plus animasi
    12. Slide header image
    13. Page Navigation Custom Mobile { lihat gambar }


    Cara membuat Link Page Navigation disini







    DOWNLOAD DEMO
    DETIL







    Catatan
    jika anda minginginkan perubahan warna pada widget Popular Post sobat tinggal cari kode pada edit html seperti di bawah
    /* Set color and level */
    .PopularPosts ul li:nth-child(1) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(2) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(3) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(4) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(5) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(6) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(7) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(8) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(9) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts ul li:nth-child(10) {background-color:#FFFFFF;margin-right:0% !important}
    .PopularPosts .item-thumbnail {
    margin:0 0 0 0;
    }
    ubah kode #ffffff dari baris no 2 sampai no 11

    oky mudah-mudahan anda puas dengan artikel sederhana yang sedikit mengocok isi perut anda.... ini !ha..ha..ha..


    Download Template Jeritan Hati

    Halo apa kabar konco-konco kwabeh ...?Mas Hidayatd mau berbagi template Free yang siap pakai untuk kalian semua nih,,, Template yang keren abiiis...100 persen responsiv ..?.. Oky gan Template ini awalnya pesanan dari salah seorang temen kuliah saya yang saat itu lagi di tinggal kekasihnya selingkuh ...waah waah hari gini kok tidak ikut-ikutan selingkuh ya ketinggalan doong kasihan banget yaa.. dia bilang katanya lagi sakit hati rasanya mau menjerit . malamnya tepat dini hari saya sengaja bangun dari tidur saya membuatkan blog pesananya ...singkat cerita jadilah Template ini namanya JERITAN HATI he ..he,,Ooh yaa mugkin Template ini agak sedikit nyleneh terkesan waktu membuat nya sangat terburu-buru..., tapi anda gak usah khuwatir ,sebelum template ini mau saya bagikan ke temen-temen terlebih dahulu saya lakukan pengeditan ulang hingga seratus kali ooooh betapa capeknya saya saat itu...,dah akhirnya pekerjaan saya membuah kan hasil jadilah sebuah template yang sederhana imuut.. cantiik.. maniis..nggak nakal...haa..haa .., oky bagi temen-temen yang ingin merubah blognya bisa menjerit ...,tidak ada salah nya kalau anda sekalian downlod template ini rame-rame...

    Anda penasaran ..?seperti apa dan bagaimana template nya..?
    oky langsung saja ke Template JERITAN HATI bla bla bla...
    berikut spesifik Template

    1. 100% Responsive
    2. Custom Mobile Template
    3. SEO Optimized
    4. Ad and AdSense Optimized
    5. Breadcrumb
    6. Fully Customizable
    7. Auto Readmore
    8. Popular Post
    9. Related articles
    10. Related articles Custom Mobile
    11. Share Buttons plus animasi unik
    12. Page Navigation Custom Mobile







    DOWNLOAD | DEMO | DETIL
    oky sampai disini Download Template Jeritan Hati semoga tidak bermanfaat ...,Ooop busyeet

    17 January 2015

    Cara membuat Link Page Navigation

    Halo apa kabar bolo-bolo semua ...?kembali ane mau berbagi tips seputer Blog untuk kalian semua yaitu.... kepiye Cara membuat Link Page Navigation.? apa sih Page Navigation itu.? Page Navigation adalah sebuah menu page navigasi yang letaknya di bagian atas blog (Header).
    Fungsi daripada Page Navigation sendiri sebenarnya sama dengan Menu Navigasi Dropdown, cuma bedanya Page Navigation ini kalau di lihat di Browsur seluler akan terlihat semua linknya rata tengah, sedangkan Menu Navigasi Dropdown jika di klik akan muncul sederetan link ke bawah, baik mari kita pergi bareng-bareng ke tempat kejadian untuk melihat bagamana cara membuat Link Page Navigation ...Oops jangan anda salah mengira .....!

    1. Pertama tama anda buka terlebih dahulu salah satu artikel atau posting anda , dan akan muncul halaman artikel blog anda ,copy alamat link artikel blog pada bagian kiri atas Browsur
      nah kita tinggalkan dulu sementara ,

    2. kita buka tab baru masuk ke
      -Dasbor blogger >>
      -pilih Tata Letak >>
      -pilih Page edit >>
      -pilih + Tambahkan tautan eksternal



    3. akan muncu laman seperti ini
    4. Pastekan alamat link yang anda copy tadi di bagian kotak yang di sediakan dan beri judul sesuai selera anda ,nah judul inilah nanti yang akan muncul di Link Page Navigation, jika anda ingin membuat lebih dari satu Link Page Navigation lakukan seperti cara di atas mulai dari awal ,
    5. Inilah yang ditunggu - tunggu , silahkan Simpan Tautan anda dan lihat hasilnya

      Tak terasa kini kita telah berhasil membuat Link Page Navigation, ternyata cukup capek juga ya membuat Link Page Navigation yang sekeren itu , tapi asalkan anda tahu ya,, lebih lelah yang menyajikan tutorialnya dari pada anda mempraktekan ooops ok sekian dari Mas Hidayatd, silahkan mencobanya

    Downlod Template Cyankemu Lowwers

    Halo apa kabar bolo-bolo semua ...?kembali ane mau berbagi template Free yang siap pakai untuk kalian semua , walaupun template ini bisa dibilang masih banyak kekurangan jika di banding template free diblog lain tetapi saya yaqin template bikinan Mas Hidayatd ini layak di share ke temen-temen yang ingin memodif blognya menjadi blog yang super keren dan terlihat modif secara instan .

    Anda penasaran ..?seperti apa dan bagaimana template tersebut..? template ini saya kasih nama

    Cyankemu Lowwers

    ,kenapa namanya Cyankemu Lowwers..apa tidak ada nama lain ..? wooow ceritanya panjang mas broow nanti kelamaan ceritanya.
    oky langsung saja ke pokok pembahasan yaitu Downlod Template Cyankemu Lowwers ha..ha..ha.. ada-ada saja
    berikut spesifik Template Cyankemu Lowwers

    1. 100% Responsive
    2. Custom Mobile Template
    3. SEO Optimized
    4. Ad and AdSense Optimized
    5. Breadcrumb
    6. Fully Customizable
    7. Auto Readmore
    8. Popular Post
    9. Related articles
    10. Related articles Custom Mobile
    11. Share Buttons
    12. Page Navigation Custom Mobile { lihat gambar }






    DOWNLOAD DEMO
    DETIL

    16 January 2015

    Downlod Template Setengah Jadi

    Halo apa kabar kawan kawan semua ...?di kesempatan ini ane mau berbagi template gratis yang siap di unduh untuk kalian semua , walaupun template ini bisa dibilang masih banyak kekurangan dan mungkin perlu di sempurnakan lagi tetapi saya yaqin template bikinan Mas Hidayatd ini layak di share ke temen-temen yang ingin memodif blognya secara instan .

    Anda penasaran ..?seperti apa dan bagaimana template tersebut..? template ini saya kasih nama SETENGAH JADI ,kenapa namanya setengah jadi..apa tidak ada nama lain ..? wooow ceritanya panjang mas broow ..

    Dan template ini mempunyai banyak vitur sangat cocok untuk media iklan , soal responsiv ooh... pasti dong, SEO dan ringan lodding, oky apa saja keistimewaan serta spesifik daripada template SETENGAH JADI tersebut ,,,,

    TEMPLATE SETENGAH JADI

    1. 100% Responsive
    2. Custom Mobile Template
    3. SEO Optimized
    4. Ad and AdSense Optimized
    5. Breadcrumb
    6. Fully Customizable
    7. Auto Readmore
    8. Popular Post
    9. Related articles
    10. Related articles Custom Mobile
    11. Share Buttons
    12. Page Navigation Custom Mobile { lihat gambar }

    Cara membuat Link Page Navigation disini







    DOWNLOAD DEMO
    DETIL

    15 January 2015

    Cara MemasangTemplate Hasil Download

    Berbicara masalah Blog/website memang sangatlah luas ,pengertian sebuah blog adalah wadah atau media dimana kita menuangkan berbagai macam artikel ,inspirasi ,trik atau sebuah informasi dan lain-lain, Namun apa jadinya artikel ,inspirasi ,trik atau sebuah informasi di dalam sebuah blog jika blog itu sendiri tidak mampu menghipnotis si pengunjung agar betah dan berlama-lama di blog kita..?
    Nah...Problem inilah yang sering kali tidak di perhatikan si pemilik blog, Untuk menaikkan trafik rating sebuah blog dibutuhkan kerja keras salah satunya dengan memberi artikel artikel dan informasi yang pas dan akurat dan yang tak kalah petingnya ...adalah tampilan blog itu sendiri, kita sebagai Admin si pemilik blog di tuntut untuk berkreasi dan berinovatif agar blog yang kita kelola akan menjadi sebuah blog yang profesional. Tetapi di beberapa situs yang kami amati termasuk presentasi dalam komentar yang masuk di setiap artikel masih banyak sahabat-sahabat kita agak sedikit kerepotan dengan masalah dan problem yang berkaitan dengan pengeditan serta kode-kode dalam blog tersebut, oky …baik anda tidak perlu khawatir disini saya akan berbagi rahasia dan tips untuk mengatasi masalah anda semua…

    Bagaimanakah caranya agar supaya web/blog kita akan terlihat sebagai web profesional dinamis dan modif..pertama anda duduklah sejenak dengan santai dihadapan computer anda .

    Solusi saya adalah menggunakan Template hasil Download, karena dengan fasilitas template gratis saya tidak perlu bersusah payah untuk memperbagus Template lagi, hanya menyusun widget agar terlihat rapi dan bagus. Bagi anda yang belum tau cara bagaimana mengistal Template yang baru saja anda downlod dibawah ini akan saya uraikan secara gamblang dan jelas dan ikuti langkah-langkahnya

    Langsung saja kita simak cara mengganti Template Untuk blogspot


    1. Login ke Blogger.com
    2. Pastikan anda sudah mendownload template yang akan anda gunakan dan sudah anda ekstrack, karena biasanya file masih dalam format Rar atau Zip cara mengekstrak klik maous kanan pilih ekstrak ,maka file otomatis berubah menjadi file (xml)
    3. Masuk ke menu Template, lalu pilih Cadangkan/Pulihkan




    4. Sebelum mengunggah Template, saran saya Download template anda yang sebelum nya, pilih Unduh Template Lengkap,
    5. Jika sudah, pilih file template yang sudah anda ekstrak tadi (biasanya berformat .xml atau .txt ), kalau sudah ketemu, klik unggah
    6. Tunggu beberapa detik, Selesai
    7. dan jika muncul dilayar seperti gambar di bawah ,,,tenang saja anda tidak perlu kaget itu hanya pekerjaan iseng saja dari google
    8. klik tutup lihat blog anda dengan tampilan template baru Sekarang tugas anda hanyalah mengatur tempat Widget yang pas, supaya isi blog anda terlihat rapi dan menarik.
    9. agar supaya template blog anda lebih responsiv saya saran kan di sesuaikan ke template seluller caranya;pada menu edit html pilih >> temlpate seluler >>
      kemudian pilih khusus
    10. SIMPAN
    Semoga tidak bermanfaat......oooops

    5 January 2015

    Downlod Template free


    Template full responsive free

    Dalam dunia blogger untuk membangun sebuah Blog/web tentu tidaklah mudah , kita sebagai Admin si pemilik blog di tuntut untuk berkreasi dan berinovatif agar blog yang kita kelola akan menjadi sebuah blog yang profesional. Tetapi di beberapa situs yang kami amati termasuk presentasi dalam komentar yang masuk di setiap artikel masih banyak sahabat-sahabat kita agak sedikit kerepotan dengan masalah dan problem yang berkaitan dengan pengeditan serta kode-kode dalam blog tersebut, oky …baik anda tidak perlu khawatir disini saya akan berbagi rahasia dan tips untuk mengatasi masalah anda semua…

    Bagaimanakah caranya agar supaya web/blog kita akan terlihat sebagai web profesional dinamis dan modif..pertama anda duduklah dengan santai dihadapan computer anda . teruskan dengan perlahan mengambil nafas dalam-dalam , tutup mata sejenak …lalu bukak dan lanjutkan dengan membaca artikel dibawah ..! gak usah terlalu serius mas broo ,,,,dibawa enjoi ajalaaah….
    Berikut ini beberapa template full responsive Free alias gratis yang sengaja saya bagikan untuk anda semua



    Setengah Jadi

    DOWNLOAD | DEMO | DETIL



    Sakit Hati

    DOWNLOAD | DEMO | DETIL



    Jeritan Hati

    DOWNLOAD | DEMO | DETIL




    cyankemu lowwers

    DOWNLOAD | DEMO | DETIL



    bokong bysulen

    DOWNLOAD | DEMO | DETIL



    Scren Blue

    DOWNLOAD | DETIL | DEMO