Mengganti Next Previous Page dengan Judul Posting Blog

09:25
Mengganti Next Previous Page dengan Judul Posting Blog

Bloggingpasuruan - Kali saya akan memberikan tips bagaimana cara mengganti next dan previous page atau umum disebut halaman berikutnya dan halaman sebelumnya. Umumnya ini terdapat pada bagian bawah postbody yang tampilannya terdapat beranda di posisi tengah atau diantara halaman berikutnya dan sebelumnya.

Mengganti Next Previous Page dengan Judul Posting Blog

Dan kita akan memodifikasi tampilan default ( bawaan blogger ) seperti gambar diatas menjadi tampilan lebih keren.

Lihat DEMO


Berikut ini Cara Mengganti Next Previous Page dengan Judul Posting di Blogger

1.Masuk ke a kun Blogger Anda
2.Pilih Dashbord >> Templete >> Edit Html
3.Cari kode ]]></b:skin>, kemudian letakkan kode dibawah ini sebelum kode ]]></b:skin>


CCS - BLOGGINGPASURUAN

/* Bloggingpasuruan replace previous and next page to title */
.bloggingpasuruan-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.bloggingpasuruan-pager li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.bloggingpasuruan-pager li.next a { padding-left: 24px; }
.bloggingpasuruan-pager li.previous { height:114px; margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
}
.bloggingpasuruan-pager li.previous a { padding-right: 24px;  }
.bloggingpasuruan-pager li.next:hover, .bloggingpasuruan-pager li.previous:hover  {background:#576269; }
.bloggingpasuruan-pager li { width: 50%; display: inline; float: left; text-align: center; }
.bloggingpasuruan-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.bloggingpasuruan-pager li i { color: #ccc; font-size: 18px; }
.bloggingpasuruan-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.bloggingpasuruan-pager li a span { font-size: 15px; color: #666;  font-family:oswald,Helvetica, arial; margin:0px;}
.bloggingpasuruan-pager li a:hover span,
.bloggingpasuruan-pager li a:hover i { color: #ffffff; }
.bloggingpasuruan-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.bloggingpasuruan-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }
.bloggingpasuruan-pager li.next i, .bloggingpasuruan-pager li.previous i ,
.bloggingpasuruan-pager li.next,  .bloggingpasuruan-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}


4.Setelah itu cari kode <head> letakkan kode dibawah ini tepat dibawah kode <head>


LINKS - BLOGGINGPASURUAN

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


5.Kemudian cari <data:post.body/>, pada template umumnya terdapat lebih dari satu tag <data:post.body/>.Letakkan kode dibawah ini pada <data:post.body/> yang ke dua atau yang ke tiga.


HTML + jQuery - BLOGGINGPASURUAN

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <ul class='bloggingpasuruan-pager'>
            <li class='next'>
    <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' />
    <b:else/>
    <i class='fa fa-chevron-right'/><a ><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
    </b:if>
    </li>
        <li class='previous'>
    <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' />
    <b:else/>
    <i class='fa fa-chevron-left'/><a ><strong>Previous</strong> <span>You are viewing Last Post</span></a>
    </b:if>
    </li>
        </ul>
    <script type='text/javascript'>
    //<![CDATA[
    (function($){  
        var newerLink = $('a.newer-link');
        var olderLink = $('a.older-link');
        $.get(newerLink.attr('href'), function (data) {
         newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h1.post-title').text()+'</span>');  
        },"html");
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h1.post-title').text()+'</span>');  
        },"html");
    })(jQuery);
    //]]>
    </script>
          </b:if></b:if>

6.Kemudian Simpan template… selesai,dan lihat hasilnya

Jika ada masalah terkait tutorial Cara Mengganti Next Previous Page dengan Judul Posting, silahkan tinggalkan pesan pada kotak komentar di bawah ini. Dan jika Anda tertarik dengan tutorial diatas mohon bantuannya untuk share ke social media dibawah ini, terima kasih atas kunjungannya…

Cara Membuat Widget Email Subcribe dengan Ripple Animasi di Blogger

03:57
Cara Membuat Widget Email Subcribe dengan Ripple Animasi di Blogger

Tujuan kita dalam membuat sebuah blog tentu tidak lepas dengan pengunjung (visitor), baik visitor bertarget maupun tidak, visitor yang datang melalui Search Engine maupun hasil Blogwalking. Nah, biasanya ada suatu visitor yang menganggap blog anda selalu berguna untuknya, selalu dianggap menarik dalam segi isi dan cara penulisannya. Maka dari itu dibutuhkan widget seperti Artikel Berlangganan agar memudahkan visitor mengakses artikel anda apabila suatu saat anda meng-update.

Kali ini saya akan posting tentang Cara Membuat Widget Email Subcribe dengan Ripple Animasi di Blogger, memang sudah banyak artikel tentang cara mendisain widget Email Subscribe namun desain kali ini cukup sederhana menarik dan responsive. 

Lihat DEMO


Catatan :Disini Anda harus memiliki ID Feedburnersebelum memasang Widget Subscribe dengan Ripple Animasi di atas. Untuk mendaftarkan Blog Anda di Feedburner terlebih dahulu untuk mendapatkan ID Feedburner yang nantinya akan diletakkan pada script yang akan saya terangkan lebih lengkap seperti dibawah ini.



Ikuti langkah-langkahnya berikut ini :

1. Masuk ke akun Blogger Anda
2. Masuk ke Dashboard >> Templete >>Edit HTML
3. Cari kode berikut ini ]]</b:skin>jika sudak ketemu, letakkan kode dibawah ini sebelum kode ]]</b:skin>


CCS - Bloggingpasuruan.blogspot.co.id

/* CSS Subscribe email by bloggingpasuruan.blogspot.co.id */
@import url(https://fonts.googleapis.com/css?family=Oswald);
.subscribe-box { background: #00ACF5;color: #FFF;width:86%;letter-spacing: 1px;text-align: center;padding: 20px;font-family:&#39;Open Sans&#39;box-shadow: 1px 1px 2px;}
.text-subscribe {text-transform: uppercase;}
.bigger-text {font-size: 50px;font-weight: 900;}
.text2-subscribe {text-align: justify;font-family:&#39;Open Sans&#39;margin-top: 3px;line-height: 1.5em;margin-bottom: 20px;font-size: 12px;}
input.newsletter-address {width: 80%;padding: 24px;background: #008BC5;color: #FFFFFF;font-family: Oswald;border: 0;}
.newsletter-address::-webkit-input-placeholder {color: #00ACF5;}
input.newsletter-submit {color: #FFF;transition: ease .3s all;font-family:&#39;Oswald&#39;cursor: pointer;background: #005D84;border: 0;width: 100%;padding: 10px;font-size: 15px;margin-top: 10px;text-align: center;}
.attention-subscribe { font-size: 11px;margin-top: 7px;font-family:&#39;Open Sans&#39;
}
input.newsletter-submit:hover {box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);}
input.ripple-effect.newsletter-submit:focus {box-shadow: 0px 5px 10px 2px rgba(0, 78, 111, 0.43);}

4. Setelah itu silahkan cari kode </head>jika sudah ketemu silahkan letakkan kode dibawah ini sebelum kode </head>

jQuery - Bloggingpasuruan.blogspot.co.id

<script>
//<![CDATA[
jQuery(document).ready(function(e){e("body").on("click",".ripple-effect",function(t){t.preventDefault();var i=e(this),a=i.attr("data-ripple-limit"),n=i.attr("data-ripple-color");if("undefined"==typeof n)var n="rgba( 0, 0, 0, 0.3 )";var o=i.attr("data-ripple-wrap-radius");if("undefined"==typeof o)var o=0;if("undefined"==typeof a)var r=i;else var r=i.closest(a);var p=r.offset(),d=t.pageX,s=t.pageY,f=r.outerWidth(),l=r.outerHeight(),u=e('<span class="ripple-effect-wrap"></span>');u.css({width:f,height:l,position:"absolute",top:p.top,left:p.left,"z-index":1e4,overflow:"hidden","background-clip":"padding-box","-webkit-border-radius":o,"border-radius":o});var c=i.attr("data-ripple-wrap-class");"undefined"!=typeof c&&u.addClass(c),u.appendTo("body");var b=d-p.left,m=s-p.top,g=1e3,h=e('<span class="ripple"></span>');h.css({width:g,height:g,background:n,position:"absolute",top:m-g/2,left:b-g/2,content:"","background-clip":"padding-box","-webkit-border-radius":"50%","border-radius":"50%","-webkit-animation-name":"ripple-animation","animation-name":"ripple-animation","-webkit-animation-duration":"5s","animation-duration":"5s","-webkit-animation-fill-mode":"both","animation-fill-mode":"both"}),e(".ripple-effect-wrap:last").append(h),setTimeout(function(){u.fadeOut(function(){e(this).remove()})},500);var v=i.attr("href"),w=i.attr("target");w||(w="_self"),"undefined"!=typeof v&&"#"!=v.substring(0,1)&&setTimeout(function(){window.open(v,w)},200),(i.is("input")||i.is("button"))&&setTimeout(function(){i.removeClass("ripple-effect"),i.trigger("click"),i.addClass("ripple-effect")},200)})});
//]]>
</script>


5. Setelah itu tekan Save ( simpan )

6. Kemudian silahkan masuk ke Dashboad >> Tata Letak >>Add Gadget (tambah gadget).Pada kotak yang di sediakan, silahkan masukan kode HTML dibawah ini ke dalam kotak tersebut.

HTML - Bloggingpasuruan.blogspot.co.id

<div class="subscribe-box"><div class="text-subscribe">Dapatkan Update Artikel Terbaru<div class="bigger-text">GRATIS !</div><div class="text2-subscribe"> Hanya dengan memasukkan  id email Anda di bawah ini dan kemudian tekan tombol "Berlangganan" maka secara otomatis Anda akan menerima update artikel  terbaru dari blog ini langsung di inbox email Anda!</div></div>
<div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=ID-FEEDBURNER-ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return
true" id="bg-embedded-subscribe-form" name="bg-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div>
 <input type="email" value="" name="EMAIL" class="newsletter-address" placeholder="Email Address" required />
    <div style="position: absolute; left: -5000px;"><input type="text" tabindex="-1" value="" /></div>
    <div class="clear"><input type="submit" value="Berlangganan" name="subscribe" class="ripple-effect newsletter-submit" /></div>
    </div>
</form>
</div>
<div class="attention-subscribe"> Kami tidak akan pernah spam Anda.</div></div>


7. Simpan, Selesai dan lihat hasilnya….

Jika Anda menemui masalah terkait desain dari Widget Email Subcribe dengan Ripple Animasi, silahklan tinggalkan pesan pada kotak komentar dibawah ini. Sebelumnya Admin mengucapkan terima kasih atas kunjungannya..

Anda suka artikel di atas ? Jangan lupa share ya…….