Cara membuat membagikan laman didalam postingan

Membagikan Laman Didalam Postingan

Buat para blogger ini ada tips cara membagikan laman postingan atau laman lainnya. fungsi ini cukup bagus jika digunakan di blogger dengan tema Berita, Komik, atau untuk membaca lainnya. karena fungsi ini tidak memakan postingan yang terlalu panjang sampai kebawah. untuk ini anda cukup meletakkan kode tersebut di template anda.

• DEMO

Salin kode dibawah ini :
Tempatkan kode ini dibagian CSS atau STYLE.

/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 0px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}

Tempatkan kode ini dibagian postingan HTML bukan Compose.

<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>

<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

NOTICE : Jika anda telah mengisi atau edit konten anda dengan di HTML, maka jangan balik ke Compose, karena kode <a class="movepg prever">prev</a> dan <a class="movepg nexter">next</a> otomatis akan menjadi link default blogger (tidak bisa melanjutkan kelaman berikutnya) karena adanya link tersebut. untuk mengatasinya, anda balik lagi ke HTML, hapus link yang ada di bagian <a class="movepg prever">prev</a> dan <a class="movepg nexter">next</a> terus publish lagi. SELESAI

Semoga Bermanfaat.