31 December 2014

Collesi gambar share button

Tags
http://2.bp.blogspot.com/-X83E1eta8xw/VJ5RlCPFGuI/AAAAAAAABE0/yRYnyv3UA3c/s1600/Mas%2BHidayatd%2B1.jpg


http://1.bp.blogspot.com/-P9CVThtutQg/VKAGjn12EqI/AAAAAAAABFE/3Gdw3AK1xH4/s1600/anigif%2B2.gif


http://1.bp.blogspot.com/-pZIi9nsJG9M/VKBq9eUihXI/AAAAAAAABF4/hye058whD1I/s1600/Mas%2BHidayatd.gif


http://1.bp.blogspot.com/-YXVJgJ3B8Zs/VKLk7uPcDJI/AAAAAAAABHY/ekVlCoRfhhU/s1600/Mas%2BHidayatd.gif%2B2.gif


http://3.bp.blogspot.com/-edswhZFCcPA/VKLquChF0II/AAAAAAAABH4/k2Pr0pNfjTU/s1600/Mas%2BHidayatd.gif

http://3.bp.blogspot.com/-x9HrA5EOWeo/VKVMYLXJGtI/AAAAAAAABJ4/RBtaL2AI32g/s1600/Mas%2BHidayatd%2B2.gif


http://1.bp.blogspot.com/-hu9Uh0J-ZVA/VKVMY-fuCqI/AAAAAAAABJ8/Zoex7D6sy-8/s1600/Mas%2BHidayatd%2B3.gif

http://4.bp.blogspot.com/-7fBapJ_EcbU/VKVMaAEZ4nI/AAAAAAAABKI/8nBLJiSLh3k/s1600/Mas%2BHidayatd.gif

http://1.bp.blogspot.com/-n930VGo6TR4/VKrEILZ5GoI/AAAAAAAABKc/eRw84BJmzok/s1600/Mas%2BHidayatd.gif

http://3.bp.blogspot.com/-HjBPGldRogg/VKrEpyWufkI/AAAAAAAABKk/AXHryZ7yNMI/s1600/Mas%2BHidayatd.png


http://4.bp.blogspot.com/-m_XJ1j6zQJY/VL9HVR0SXiI/AAAAAAAABVs/zKuBa0P70DE/s1600/Mas%2BHidayatd.jpg

http://4.bp.blogspot.com/-wai78nbtwoY/VL9Hhe2obLI/AAAAAAAABV0/hvz1Abi6dgU/s1600/Home.png


http://4.bp.blogspot.com/-Z35If9qhk7w/VL9HsuhKssI/AAAAAAAABV8/kyqA6Gmg2Gk/s1600/Mas%2BHidayatd.jpg


http://4.bp.blogspot.com/-l94F7L2WVtY/VKwtEAae71I/AAAAAAAABLE/RtlkVyB7-Vs/s1600/Mas%2BHidayatd.png

http://3.bp.blogspot.com/-ee3gwdT4MuI/VMm4nLyrsZI/AAAAAAAABYM/aVqozdU3SQ0/s1600/Mas%2BHidayatd.jpg

29 December 2014

Cara membuat popular posts warna warni rata pinggir di sidbar blog

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

28 December 2014

Cara Membuat Tombol Share di Blog terkeren saat ini

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

    27 December 2014

    Cara membuat artikel terkait mirip evo Magz

    Blogspot secara defauld artikel terkait atau related post tidak di sediakan tanpa kita memasangnya sendiri terlebih dahulu ,bagi para Blogger mania yang suka otak atik edit Html tentu masalah ini akan menimbulkan tanda tanya , jika anda bertanya bisakah pos terkait atau related post di tampilkan di Blog serta di modif sesuai selera...,? jawabanya Oooh...sannnngat bisa dong yaitu dengan cara mengatur beberapa opsi dan tambahan kode script tertentu ke dalam template yang digunakan. Namun yang perlu diperhatikan di sini adalah di bagian mana script tersebut harus diletakkan, dan yang satu lagi related post ini nantinya akan tampil mirip template premium Evo Magz , sudah pada penasaran kan seperti apa bentuk dan raut muka related post tersebut...?. Untuk lebih jelasnya,ikuti langkah-langkah sebagai berikut ;
    • Pertama silahkan sobat masuk ke halaman blog anda
    • edit template
    • Kemudian Pasang kode css berikut tepat diatas kode  ]]></b:skin>
    /* ==== Related Post Widget Start ==== */
    .related-post {
    margin:15px 0 0;
    border-top:1px solid #f0f0f0;
    padding:15px 0 0;
    }
    .related-post h4 {
    font:normal 16px Oswald;
    color:#000000;
    border-bottom:3px solid #0A8D94;
    margin:0 0 .5em;
    text-transform:uppercase;
    }
    .related-post-style-2 {
    margin:0 0 0 0 !important;
    padding:0 0 0 0 !important;
    list-style:none;
    }
    .related-post-style-2 li {
    margin:0 0 0 0;
    padding:0 0 0 0;
    }
    .related-post-style-2 li {
    padding:5px 0 !important;
    border-top:1px solid #eee;
    overflow:hidden;
    }
    .related-post-style-2 li:first-child {border-top:none}
    .related-post-style-2 .related-post-item-thumbnail {
    width:60px;
    height:60px;
    max-width:none;
    max-height:none;
    background-color:transparent;
    border:none;
    padding:0;
    float:left;
    margin:2px 8px 0 0;
    }
    .related-post-style-2 .related-post-item-title {
    font:normal normal 16px Oswald;
    color:#086D72;
    }
    .related-post-style-2 .related-post-item-summary {
    font:normal normal 12px Arial;
    display:block;
    overflow:hidden;
    }
    .related-post-style-2 .related-post-item-more {}

    3. silahkan cari code <data:post.body/> dan letakkan kode berikut di bawah kode<data:post.body/>
    <!-- Related Post Widget Start -->
         <div class='related-post' id='related-post'/>
    <script type='text/javascript'>
         var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
           &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop></b:if>];
         var relatedPostConfig = {
          homePage: &quot;<data:blog.homepageUrl/>&quot;,
          widgetTitle: &quot;&lt;h4&gt;Artikel menarik lainya :&lt;/h4&gt;&quot;,
          numPosts: 5,
          summaryLength: 140,
          titleLength: &quot;auto&quot;,
          thumbnailSize: 60,
          noImage: &quot;http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w60-h60-c/no-image.png&quot;,
          containerId: &quot;related-post&quot;,
          newTabLink: false,
          moreText: &quot;Read More...&quot;,
          widgetStyle: 2,
          callBack: function() {}
         };
         </script>
       <!-- Related Post Widget End -->

    4. scrol maos anda arah ke paling bawah temukan kode </body> dan pasang kode berikut ini diatas kode </body>
    <script type='text/javascript'>
    //<![CDATA[     
    /*! Related Post Widget for Blogger by syarif hidayat => http://gplus.to/tovic */
    var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>
    Artikel Terkait:</h4>
    ",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='
    <li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>
    "}else{if(A==3||A==4){c+='
    <li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip">
    <a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>
    "+y+"</li>
    "}else{if(A==5){c+='
    <li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>
    "}else{if(A==6){c+='
    <li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip">
    <img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div>
    </li>
    "}else{c+='
    <li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>
    "}}}}}s.innerHTML=c+="</ul>
    "+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
    //]]>     
    </script>
    terakhir simpan ;
    dan silahkan lihat hasil jerih payah anda ....he ..he..he..
    Sebetulnya cara memasang related post di blog ini sama seperti memasang tombol share , nah jika sobat ingin meletakan related post tersebut persis di bawahnya tombol share, maka pemasangan kode ini harus tepat di bawahnya code share , oke sekian cara membuat artikel terkait mirip evo magz , semoga bermanfaat bagi anda , jika ada yang ingin ditanyakan silahkan sampaikan di kolom komentar dibawah,,,, dengan senang hati saya Admin akan berusaha membantu dan memberi solusi oky,,,,,

    23 December 2014

    Cara membuat teks area dengan Syntax Highlighter



    nama gambar
    Syntax Highlighter © social media com



    Bagi Anda yang sering posting source code pada Web/Blog tentu fitur Syntax Highlighter akan sangat membantu agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya lebih menarik bagi pengunjung. Nah, sekarang masalahnya bagaimana cara kita menggunakan Syntax Highlighter ini pada blog khususnya di Blogger.com?


    Syntax Highlighter adalah suatu fitur, biasanya dari text editor khususnya editor source code bahasa pemrograman tertentu untuk menampilkan text tersebut dalam berbagai warna agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut.

    Jika di blogspot kita biasa menampilkan kode,, supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Syntax Highlighter ini tampilannya membedakan dari tulisan satu dengan yang lainnya, namun Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. kode untuk Syntax Highlighter ini sendiri dibuat oleh Alex Gorbatchev (2004-2008). Adapun fitur yang ada dalam Syntax Highlighter ini yaitu:
    1. Adanya fasilitas print untuk kode
    2. Adanya fasilitas View Plain yaitu membuka barisan kode dalam popup windows
    3. Adanya fasilitas Help untuk melihat bantuan.
    Untuk contoh Syntax Highlighter temen-temen bisa lihat kode javascript yang saya pasang pada postingan ini. Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya dengan detiel :

    1.  Login dengan akun blogger anda kemudian pilih Rancangan

    2.  Klik EDIT HTML (centang expand template widget)

    3.  Simpan kode berikut Setelah kode <head> atau sebelum kode </head>
    <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js'  type='text/javascript'></script>  
        <script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'  type='text/javascript'></script>
    4. Selanjutnya scroll mouse kalian kebawah dan cari kode ]]>
    5.  Simpan CSS berikut diatas kode ]]></b:skin>
    .dp-highlighter{
    font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
    font-size: 12px;
    background-color: #E7E5DC;
    width: 99%;
    overflow: auto;
    margin: 18px 0 18px 0 !important;
    padding-top: 1px; /* adds a little border on top when controls are hidden */
    }
    
    /* clear styles */
    .dp-highlighter ol,
    .dp-highlighter ol li,
    .dp-highlighter ol li span
    {
    margin: 0;
    padding: 0;
    border: none;
    }
    
    .dp-highlighter a,
    .dp-highlighter a:hover
    {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    }
    
    .dp-highlighter .bar
    {
    padding-left: 45px;
    }
    
    .dp-highlighter.collapsed .bar,
    .dp-highlighter.nogutter .bar
    {
    padding-left: 0px;
    }
    
    .dp-highlighter ol
    {
    list-style: decimal; /* for ie */
    background-color: #fff;
    margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
    padding: 0px;
    color: #5C5C5C;
    }
    
    .dp-highlighter.nogutter ol,
    .dp-highlighter.nogutter ol li
    {
    list-style: none !important;
    margin-left: 0px !important;
    }
    
    .dp-highlighter ol li,
    .dp-highlighter .columns div
    {
    list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
    list-style-position: outside !important;
    border-left: 3px solid #6CE26C;
    background-color: #F8F8F8;
    color: #5C5C5C;
    padding: 0 3px 0 10px !important;
    margin: 0 !important;
    line-height: 14px;
    }
    
    .dp-highlighter.nogutter ol li,
    .dp-highlighter.nogutter .columns div
    {
    border: 0;
    }
    
    .dp-highlighter .columns
    {
    background-color: #F8F8F8;
    color: gray;
    overflow: hidden;
    width: 100%;
    }
    
    .dp-highlighter .columns div
    {
    padding-bottom: 5px;
    }
    
    .dp-highlighter ol li.alt
    {
    background-color: #FFF;
    color: inherit;
    }
    
    .dp-highlighter ol li span
    {
    color: black;
    background-color: inherit;
    }
    
    /* Adjust some properties when collapsed */
    
    .dp-highlighter.collapsed ol
    {
    margin: 0px;
    }
    
    .dp-highlighter.collapsed ol li
    {
    display: none;
    }
    
    /* Additional modifications when in print-view */
    
    .dp-highlighter.printing
    {
    border: none;
    }
    
    .dp-highlighter.printing .tools
    {
    display: none !important;
    }
    
    .dp-highlighter.printing li
    {
    display: list-item !important;
    }
    
    /* Styles for the tools */
    
    .dp-highlighter .tools
    {
    padding: 3px 8px 3px 10px;
    font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: silver;
    background-color: #f8f8f8;
    padding-bottom: 10px;
    border-left: 3px solid #6CE26C;
    }
    
    .dp-highlighter.nogutter .tools
    {
    border-left: 0;
    }
    
    .dp-highlighter.collapsed .tools
    {
    border-bottom: 0;
    }
    
    .dp-highlighter .tools a
    {
    font-size: 9px;
    color: #a0a0a0;
    background-color: inherit;
    text-decoration: none;
    margin-right: 10px;
    }
    
    .dp-highlighter .tools a:hover
    {
    color: red;
    background-color: inherit;
    text-decoration: underline;
    }
    
    /* About dialog styles */
    
    .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
    .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
    .dp-about td { padding: 10px; vertical-align: top; }
    .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
    .dp-about .title { color: red; background-color: inherit; font-weight: bold; }
    .dp-about .para { margin: 0 0 4px 0; }
    .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
    .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
    
    /* Language specific styles */
    
    .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
    .dp-highlighter .string { color: blue; background-color: inherit; }
    .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
    .dp-highlighter .preprocessor { color: gray; background-color: inherit; }
    

    6. Sekarang lanjut ke bagian paling bawah dan cari kode <body>
    Simpan kode berikut diatas kode<body> tadi
    .<!-- Add-in Script for syntax highlighting  -->  
        <script language='javascript'>  
        dp.SyntaxHighlighter.BloggerMode();  
        dp.SyntaxHighlighter.HighlightAll('code');  
        </script>  

    7. Simpan template anda.
    Pemasangan kode HTML untuk membuat Syntax Highlighter pada template sudah selesai tinggal kita terapkan pada postingan yang memakai kode CSS atau javascript.
    Untuk pemasangan script Kode JS gunakan kode berikut
    <pre name="code" class="JScript">
    
    SIMPAN SCRIPT YANG AKAN DIPASANG DISINI
    
    </pre> 

    Untuk pemasangan kode CSS gunakan kode berikut :
    <pre name="code" class="Css">
    
    SIMPAN CSS YANG AKAN DIPASANG DISINI
    
    </pre> 

    Jika ada yang masih bingung bisa menyampikan di komentar, saya siap membatu anda.....

    22 December 2014

    Cara Menampilkan Source Code dengan Syntax Highlighter

    Tags

    nama gambar
    Gambar Syntax Highlighter © social media com


    Syntax highlighter versi 3.0.83 yang merupakan versi terbaru daru sang penemu sekalian pembuat Syntax Highlighter, Alex Gorbatchev. Sudah pada penasaran bukan, mari kita ikuti cara-cara penerapan dan penjelasan di bawah.

    Masih pada belum tahu ya apa itu Syntax Highlighter? Jadi, Syntax Highlighter adalah suatu tempat, atau wadah yang berbentuk text area dimana, didalamnya kita dapat memasukkan kode-kode yang dapat berupa code-code dari bahasa java, HTML, Jscript, PHP, CSS, dan kode-kode lainnya. 

    Apa sih Fungsi Syntax Highlighter?
    Fungsi dari Syntax Highlighter adalah mempermudah pembaca untuk membaca maupun menyalin kode yang dipost oleh penulis. Jadi, pembaca tidak perlu repot-repot lagi untuk nge-blok tulisan, kalau sedikit sih enak, bagaimana kalau lebih dari 10.000 baris code? Silahkan anda bayangkan


    Bagaimana Cara Pemasangannya?
    1. Jangan Lupa login ke Akun Blogger anda

    2. Masuk ke bagian Template, lalu klik Edit HTML

    3. Cari kode ]]></b:skin>, lalu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

    pre,i[rel="pre"] {
    padding:.8em 1em;
    margin:0;
    background-color:#2f3741;
    border-top:3px solid #2670B5;
    border-left:7px solid #2670B5;
    font-size:11px;
    color:#839496;
    font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
    line-height:1.4em;
    position:relative;
    white-space: pre;
    word-wrap: normal;
    white-space:pre;
    overflow:auto
    }
    pre.line-number {
    background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;
    padding-left:54px;
    border-left:none;
    }
    pre.line-number:after{
    content:"";
    width:35px;
    height:8px;
    background-color:#39424e;
    bottom:0;
    left:0;
    position:absolute;
    }
    pre[data-codetype="CSS"]{border-left-color:#5fbbba}
    pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
    pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
    pre[data-codetype="JQuery"]{border-left-color:#99c262}
    pre.line-number[data-codetype]:before {
    content:attr(data-codetype);
    display:block;
    margin:-11px -13px 10px -54px;
    padding:8px 12px;
    font-family:Oswald,Arial,Sans-serif;
    font-size:12px;
    text-transform:uppercase;
    background-color:#41749f;
    color:white
    }
    pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
    pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
    pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
    pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
    code {
    font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
    font-size:13px;
    color: #d14;
    }
    #comments code {
    color:#bbbb6d;
    }
    pre code {
    padding:0 !important;
    color: #a3a49a;
    background: none !important;
    border:none !important;
    display:block;
    }
    pre .line-number {
    float:left;
    margin:0 1em 0 -1em;
    color:#61686d;
    background-color:#39424e;
    text-align:right;
    min-width:2.5em;
    padding-right:4px;
    }
    pre .comment,
    pre .template_comment,
    pre .diff .header,
    pre .doctype,
    pre .pi,
    pre .lisp .string,
    pre .javadoc {
    color: #586e75;
    font-style: italic;
    }
    pre .keyword,
    pre .winutils,
    pre .method,
    pre .addition,
    pre .css .tag,
    pre .request,
    pre .status,
    pre .nginx .title {
    color: #859900;
    }
    pre .number,
    pre .command,
    pre .string,
    pre .tag .value,
    pre .rules .value,
    pre .phpdoc,
    pre .tex .formula,
    pre .regexp,
    pre .hexcolor {
    color: #7195a3;
    }
    pre .title,
    pre .localvars,
    pre .chunk,
    pre .decorator,
    pre .built_in,
    pre .identifier,
    pre .vhdl .literal,
    pre .id,
    pre .css .function {
    color: #569dcf;
    }
    pre .attribute,
    pre .variable,
    pre .lisp .body,
    pre .smalltalk .number,
    pre .constant,
    pre .class .title,
    pre .parent,
    pre .haskell .type {
    color: #aa985a;
    }
    pre .preprocessor,
    pre .preprocessor .keyword,
    pre .shebang,
    pre .symbol,
    pre .symbol .string,
    pre .diff .change,
    pre .special,
    pre .attr_selector,
    pre .important,
    pre .subst,
    pre .cdata,
    pre .clojure .title,
    pre .css .pseudo {
    color: #509a55;
    }
    pre .deletion {
    color: #dc322f;
    }
    pre .tex .formula {
    background: #073642;}
    

    4. kemudian cari kode </head> dan letakkan kode berikut ini di atasnya

    <script src='https://googledrive.com/host/0B8zY82qas755TXNaZ0FGWUVPSEE' type='text/javascript'/>
    <script>hljs.initHighlightingOnLoad();
    </script>

    5 Agar fitur Syntax Highlighter berfungsi dalam kolom komentar letakkan pula kode berikut di atas kode </body>

    <script type='text/javascript'>
    $(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
        return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
    });
    </script>

    5 save template .

    cara menampikannya di postingan


    Caranya setelah kita selesai menulis kode yang kita inginkan, masuk ke mode HTML seperti di bawah ini.




    Gunakan markup HTML di bawah ini untuk menggunakan syntax highlighter pada saat anda ingin menampilkan source code, seperti kode CSS, Javascript, dan mark up HTML.pada postingan anda.

    
    <pre><code>
    Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML
    disini...bla... bla.... bla... 
    </code></pre>

    oky, itu pembahasan tentang “Cara Menampilkan Source Code lebih Menarik dengan Syntax Highlighter” yang dapat saya sampaikan. Apabia ada yang ingin sobat tanyakan dapat ditanyakan pada kolom komentar.

    Sekian Terima Kasih, Salam Teknologi


    20 December 2014

    Cara memasang fans page Facebook di blog

    Tags
    Cara memasang atau membuat widget fans page Facebook di sidbar blog-Inilah salah satu cara untuk mempromosikan bisnis online Anda adalah dengan memasang Fans page di blog, atau juga sebaliknya untuk menaikkan popularitas blog dan mendatangkan visitor-visitor baru sebuah blog bisa melalui fanspage, dengan kata lain keduanya saling berkaitan dan saling menguntungkan. Anda sebagai pebisnis online tentu pemasangan salah satu alat dari Facebook ini sangat dibutuhkan. Dari Facebooknya sendiri alat ini dinamakan Like Box dan dapat dipasang pada sebuah web dengan ukuran widget bisa ditentukan sendiri.

    Cara membuat fans page facebook di sebuah blog tentu syaratnya adalah Anda terlebih dahulu membuat fans page melalui akun facebook Anda. Bagi Anda yang belum mempunyai alat ini silahkan membuat melalui link berikut:https://www.facebook.com/pages/create.php maka akan muncul sebuah halaman seperti gambar di bawah

    ikuti petunjuk yang diberikan pihak facebook sampai sukses di-halaman beranda fanspage Anda.
    Pemasangan fans page pada sebuah situs biasanya di simpan di bagian samping atau sidebar pada sebuah blog atau website melalui widget script HTML.

    Memasang Fans page facebook

    Secara umum ada tiga tahap dalam pembuatan sampai pemasangan di blog yaitu:
    • Pembuatan Fans fage melalui akun facebook Anda.
    • Pembuatan/pengambilan script melalui facebook develop.
    • Pemasangan script pada website atau blog.
    Pada kesempatan ini yang saya info-kan adalah cara pemasangan widget fans page facebook pada sebuah blog dari blogger atau blogspot.

    Membuat Code script untuk Blog
    1 Silahkan anda copy link URL halaman beranda Fans page facebook anda


    2 Untuk mendapatkan code script, buka link ini: https://developers.facebook.com/docs/plugins/like-box-for-pages?locale=id_ID
    3 Isi dan atur pada setiap kolom yang disediakan
    • Facebook Page URL: isi dengan link fans page yang sudah Anda buat
    • Width: Pengaturan Lebar
      dan pengaturan lainnya sesuaikan dengan kebutuhan.
    • Klik 'Get Code" apabila sudah selesai
    • Klik IFrame dan copy code nya
    Memasang code pada blogspot:

    • Log in blogger Anda
    • Pada halaman dashboard klik Layout
    • Klik "add a Gadget" pada posisi sidebar yang akan ditempatkan fans page Anda
    • Klik "HTML/JavaScript Add " dan isikan Code yang Anda copy tadi



    • Klik save dan lihat hasilnya.


    dan hasil terakhir seperti gambar di bawah ini
    Demikian sedikit info cara memasang fans page Facebook di blog, semoga bisnis online Anda semakin maju pesat seperti pesawat Rocet yang siap meluncur ke ruang angkasa he he he . Salam Blogger.

    16 December 2014

    Cara membuat teks area berwarna warni

    Tags

    Cara membuat teks area: Pengertian teks area adalah sebuah kolom atau table yang di dalamnya terdapat sederet teks untuk di copy , di samping itu teks area berfungsi sebagai tempat untuk meringkas teks yang terlalu panjang , dengan menggunakan teks area tampilan copy/paste di halaman posting akan menjadi lebih ringkas dan simpel ,
    dan berikut ini kami sajikan untuk anda beberapa collseksi teks area











    selanjutnya silahkan anda berkreasi sendiri dengan merubah kode-kode warna di atas sehingga teks area akan berbeda warna satu sama lain
    selamat mengcopy gunakan sebaik-baiknya , berbagi itu indah
    untuk kode teks area lebih lengkap lihat disini



    13 December 2014

    Cara Mengganti Judul Blog Dengan Judul Artikel

    Cara mengganti judul blog dengan judul artikel , Halo sobat blogger selamat pagi, kali ini saya akan membahas artikel tentang Cara Mengganti Judul Blog Dengan Judul Artikel, Trik ini katanya mampu meningkatkan kualitas SEO untuk sebuah blog. Dan menurut saya sendiri hal itu dapat di benarkan juga karena kita dapat mendapat sebuah keyword tambahan selain dari artikel yang telah kita buat.

    contoh gambar homepage blog:





    setelah klik artikel :





    cara cettingnya seperti berikut;

    1. Login ke Blogger
    2. Masuk ke Template, Edit HTML lalu klik Lanjutkan
    3. Centang "Expand Template Widget"
    4. Cari kode
    <b:include name='title'/>
    5. Ganti kode tadi dengan kode dibawah ini :

    <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:include name='title'/> <b:else/> <data:blog.pageName/> </b:if>

    6. Simpan Template
    7. Biasanya didalam template ada 3 atau 4 kode
    <b:include name='title'/>
    , jika kode pertama tidak berubah, silahkan coba kode yang ke 2,3 dan seterusnya

    oky selamat berkreasi semoga berhasil...

    12 December 2014

    Tool Parse


    tool parse
    Gambar: © social media com


    Cara menampilkan setiap kode script ke dalam halaman posting ketika kita membuat artikel tidaklah sulit jika kita menggunakan tool parse
    Cara menggunakan jasa parse online: silahkan paste teks kode pada kolom di bawah yang sebelumnya sudah anda siapkan.. lalu, klik Parse script kemudian copy semua (Script) yang sudah di parse dan siap untuk di gunakan.




    6 December 2014

    Cara membuat gambar dengan efek slide di blog

    Tags
    Berikut ini mas Hidayatd kembali akan membagikan tentang cara Membuat Image Slider di Blogger, Slider gambar dengan java script berikut ini memiliki tampilan yang keren menurut saya, Anda juga dapat menampilkan gambar-gambar yang anda inginkan di template ,header blog bisa juga didalam postingan menggunakan slider ini.

    Mengenai slider sobat dapat melihat slider lain juga seperti slider dengan efek quake, slider otomatis artikel terbaru, slider transisi dan slider otomatis di blog. Ok sobat berikut ini adalah kode CSS, Jquery dan Html yang sudah digambungkan dan dapat sobat gunakan langsung, atau dipisahkan menurut tipenya jika ingin menggunakannya misalnya di slider homepage.

    DEMO


    Berikut ini adalah Kodenya :
    silahkan copy dan pastekan tepat di atas kode ]]></b:skin>
    &lt;style type=&quot;text/css&quot;&gt;
    /*http://syarif-hidayatd.blogspot.com */
    #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
    #slider {
    width:700px;height:306px;/* Make it the same size as your images */
    background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
    }
    #slider img {
    position:absolute;
    border:none;
    display:none;
    }
    /* the link style (if an image is wrapped in a link) */
    #slider a.imgLink {
    z-index:2;
    display:none;position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
    }
    /* Caption styles */
    div.mc-caption-bg, div.mc-caption-bg2 {
    position:absolute;
    width:100%;
    height:auto;
    padding:0;
    left:0px;
    bottom:15px;
    z-index:3;
    overflow:hidden;
    font-size: 0;
    }
    div.mc-caption-bg {
    background-color:black;
    }
    div.mc-caption {
    font: bold 14px/20px Arial;
    color:#EEE;
    z-index:4;
    padding:10px 0;
    text-align:center;
    }
    div.mc-caption a {
    color:#FB0;
    }
    div.mc-caption a:hover {
    color:#DA0;
    }
    
    /* ------ built-in navigation bullets wrapper ------*/
    div.navBulletsWrapper {
    top:320px; left:280px; /* Its position is relative to the #slider */
    width:150px;
    background:none;
    padding-left:20px;
    position:relative;
    z-index:5;
    cursor:pointer;
    }
    /* each bullet */
    div.navBulletsWrapper div
    {
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
    }
    div.navBulletsWrapper div.active {background-position:0 -11px;}
    .intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
    }
    /* --------- Others ------- */
    #slider
    {
    transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    }
    &lt;/style&gt;
    catatan;
    -ubah ukuran tinggi lebar ruang slide 700 di barisan angka 03 di atas sesukamu
    -sesuaikan ukuran lebar width:700 dan tinggi height:306 gambar dengan kotak ruang slide pada baris angka 05'
    -Url baris nomer 06 adalah Animasi loading saat blog dibuka jeda waktu menunggu slide gambar muncul, bisa diganti atau di hilangkan

    kemudian copy script berikut dan taruh di dalam kotak widget, widgetnya mau di taruh dimana bebas..sesukamu
    <script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>
    <div id="sliderFrame">
    <div id="slider">
    <a href="#"><img src="http://1.bp.blogspot.com/-iGc99v3mr50/VIxxPtvmVvI/AAAAAAAAA-k/qodY6edvC_k/s1600/barata.jpg" alt="mas Hidayatd" /></a>
    
    <a href="#"><img src="http://4.bp.blogspot.com/-yokaSh9BudI/VIxxQlqIHSI/AAAAAAAAA-o/p2g_o78k_Mg/s1600/barata%2B2.jpg" alt="mas Hidayatd" /></a>
    
    <a href="#"><img src="http://3.bp.blogspot.com/-IVQTh9SX0EU/VIxxRI8hLMI/AAAAAAAAA-s/hA1V_t2s99I/s1600/barata%2B3.jpg" alt="mas Hidayatd" /></a>
    
    <a href="#"><img src="http://3.bp.blogspot.com/-jVOMHGNmeks/VIxxR5f0ESI/AAAAAAAAA-4/4Xyx_HyAw3c/s1600/barata%2B4.jpg" alt="mas Hidayatd" /></a>
    
    <a href="#"><img src="http://4.bp.blogspot.com/-aETBHFrHXng/VIxxYHOvZLI/AAAAAAAAA_E/AsUFXFlrMHQ/s1600/barata%2B5.jpg" mas hidayatd"/></a>
    </div>
    <div id="htmlcaption1" style="display: none;">
    Image Slider by <a href="http://syarif-hidayatd.blogspot.com/" target="_blank">social media com</a>
    </div>
    
    </div>
    
    catatan;
    -ganti url baris nomer 4,6,8,10,12 dengan url gambar anda
    -lakukan langkah-langkah sesuai prosedur petunjuk
    kalau semua langkah sudah benar silahkan klik pratinjau terlebih dahulu untuk melihat hasilnya

    terakhir: save

    jika anda mengalami kegagalan ,silahkan kirim komentar dikolom komentar yang nantinya saya akan balas dengan uraian yang lebih jelas dan lengkap
    oky sekian dulu tutorial saya tentang cara membuat gambar dengan efek slide diblog

    2 December 2014

    Cara Membuat Menu Navigasi dan Kotak Pencarian full Responsive


    Menu Navigasi dan Kotak Pencarian Responsiv;
    Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog, Ada bermacam-macam bentuk dan versi menu navigasi di dalam setiap blog , ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.


    Untuk membuatnya anda bisa melakukan posedur dan langkah langkah berikut:
    1. Login ke menu blogger. Klik Design kemudian pilih...
    -Tempalte
    -Edit HTML
    -Backup template anda
    2. Setelah itu, letakkan kode berikut ini diatas
    ]]></b:skin>

    /* Napigate tamfan */
    #napigate{background:#1658A0}
    #napigate ul li a{color:#fff}
    #napigate ul li ul li a:hover{background:#34495e}
    #napigate ul li:hover a{background:#2c3e50}
    #napigate{overflow:hidden;clear:both}
    #napigate ul{list-style:none;padding:0;margin:0}
    #napigate ul li{display:block;float:left;margin:0}
    #napigate ul li a{display:block;text-shadow:1px 1px 2px #666;font-family:'Oswald',sans-serif;font-size:16px;padding:10px 15px;transition:all 0s ease-in-out;text-transform:uppercase;}
    #napigate ul li ul li{float:none;border-top:1px solid rgba(0,0,0,0.11)}
    #napigate ul li ul li a{font-size:14px;text-shadow:0 0 0 #fff}
    #napigate ul li ul{visibility:hidden;position:absolute;z-index:9999}
    #napigate ul li:hover ul{visibility:visible;background:#34495e}
    #pencari{margin-left:5px;background:#fff;margin-bottom:5px;text-align:center}
    #search{padding:5px}
    #penginput{padding:5px;border:0;background:#2c3e50;color:#fff}
    #nyarinya input[type="text"]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;font-size:13px;margin:0}
    #search-top{padding:5px;overflow:hidden;text-align:right;margin:0}
    #search-button-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;transition:all 0.7s ease 0s;height:36px;width:40px;background-color:#34495e;background-position:13px -243px;border:none;float:right;cursor:pointer}
    #nyarinya{float:right;padding-right:5px}
    #hidding2{display:none}
    #hidding2{background:#1658A0;color:#fff;padding:10px;font-size:16px;font-family:'Oswald',sans-seriff;cursor:pointer}

    Kembali Masukkan kode berikut ini diatas
    ]]></b:skin>
    agar navigasinya responsive

    @media only screen and (max-width:992px){
    #napigate ul li{float:none}#napigate ul li ul{position:inherit;visibility:visible;background:#34495e}#napigate ul li ul li a{padding:10px 0 10px 45px}#napigate ul li:hover a{background:inherit}#napigate ul{display:none;float:none;clear:both}#hidding1,#hidding2{display:block;clear:both}#hidding2{float:left}.displaying{display:inherit!important}
    }

    masukkan jquery dibawah ini tepat diatas kode
    </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

    abaikan jika telah terdapat jquery di template anda

    masukkan script di bawah ini diatas kode </head>

    <script>
    $(document).ready(function(){
    $("#hidding1").click(function(){
    $("#croscoll ul").toggleClass("displaying");
    });
    $("#hidding2").click(function(){
    $("#napigate ul").toggleClass("displaying");
    });
    });
    </script>

    3 masukkan kode ini dibawah kode
    </header>

    <nav id='napigate'>
    <label id='hidding2'>&#8801; Menu</label>
    <ul>
    <li><a href='#'>ABC</a><ul>
    <li><a href='#'>Download Apk Android</a></li>
    <li><a href='#'>Trik Android</a></li>
    </ul>
    </li>
    <li><a href='#'>ABC</a><ul>
    <li><a href='#'>Jasa Adsense Non Hosted</a></li>
    <li><a href='#'>Jasa Adsense Hosted</a></li>
    <li><a href='#'>Jasa Adsense Upgrade</a></li>
    <li><a href='#'>Trik Adsense</a></li>
    </ul>
    </li>
    <li><a href='#'>ABC</a><ul>
    <li><a href='#'>Jasa Template Responsive</a></li>
    <li><a href='#'>Tutorial Blog</a></li>
    <li><a href='#'>Template Blog</a></li>
    </ul>
    </li>
    <li><a href='#'>ABC</a><ul>
    <li><a href='#'>Download Game PC</a></li>
    <li><a href='#'>Download Game HP</a></li>
    </ul>
    </li>
    <li><a href='#'>ABC</a><ul>
    <li><a href='#'>Harga Handphone</a></li>
    <li><a href='#'>Harga Laptop</a></li>
    <li><a href='#'>Harga Netbook</a></li>
    </ul>
    </li>
    <li><a href='#'>Kuliner</a></li>
    <li><a href='#'>Travel</a></li>
    </ul>
    <div id='nyarinya'>
    <form action='/search' id='search-top' method='get'>
    <input id='diklik' name='q' placeholder='Search...' type='text'/><input id='search-button-top' type='submit' value=''/></form>
    </div>
    </nav>
    

    4 save Selesai,