Ada Gratis One

Adakalanya kita memiliki Postingan yang panjang dan ingin kita buat lebih simple lagi dengan membagi postingan dalam beberapa bagian yang disebut juga dengan Pagination page. Pada kali ini saya akan membagikan cara membuat Pagination artikel Pada Blogspot. Contoh :

Cara Membuat Pagination Page Pada Postingan Blogspot :

Buka Blogger > Post > New Post
Pilih metode Html
Masukkan code berikut

<span class="content1">Artikel Utama</span><span class="content2" style="display:none">Artikel kedua</span><span class="content3" style="display:none">Artikel Ketiga</span><span class="content4" style="display:none">Artikel Keempat</span>

4. Pada daerah yang berwarna biru masukkan artikel yang anda inginkan
5. Kemudian Untuk memunculkan page pada Postingan masukkan kode berikut

<p><b>Pages: <span style="color: #3d85c6"><a href="#" class="page1">1</a><a href="#" class="page2">2</a><a href="#" class="page3">3</a><a href="#" class="page4">4</a></span></b></p>

6. Terakhir kita masukkan kode Javascriptnya dibawah kode diatas .

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.page1').click(function(){
jQuery('.content1').show();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page2').click(function(){
jQuery('.content1').hide();
jQuery('.content2').show();
jQuery('.content3').hide();
jQuery('.content4').hide();
return false;
});
jQuery('.page3').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').show();
jQuery('.content4').hide();
return false;
});
jQuery('.page4').click(function(){
jQuery('.content1').hide();
jQuery('.content2').hide();
jQuery('.content3').hide();
jQuery('.content4').show();
return false;
});
});
</script>

Selesailah Tutorial Pagination Page untuk postingan per artikel di Blogspot. Mudah-mudahan bermanfaat

Sumur :
OraAri Ricky Febrian Juli 25, 2017 New Google SEO Bandung, Indonesia

Cara Mudah Membuat Pagination di Postingan Blogspot Per Artikel

Cara Mudah Membuat Pagination Atau Page Number di Blogspot

Tips membuat pagination atau page number blogspot yang mudah, simple, dan works tenan. sebelumnya, kita harus tahu dulu apa itu pagination atau page number? Pagination adalah istilah yang digunakan untuk membuat penomoran halaman blog atau website agar pengunjung lebih mudah mengekplorasi semua artikel di blog kita.

Kenapa blog atau web perlu dikasi page number? tentunya jika blog tidak diberi pagination maka, blog anda akan memanjang tanpa ada ujung, membuat pengunjung capek untuk menscroll sampai bawah, terus naik lagi, nanti kalo jari si pengunjung lecet, yang mau mijetin siapa? kesien kan.. :v.. oleh karena itu anda menggunakan blogspot, secara default paginationnya kan hanya menggunakan "Older Posts" dan "Newer Posts" saja, sangat tidak menggigit beuds kan?
jadi bagaimana jika tampilannya seperti ini:

pie, cuit cuit.. kueren beuds kan. :v tapi dari script yang saya share ini, tekstur tampilannya tidak seperti di atas, tapi fungsinya tetap sama kok, makanya dicoba dulu yah. :v kalo mau seperti diatas, bisa menggunakan UI kits atau dari CSS nya aja.

Ok, Begini langkah-langkahnya:

Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit Template"
Cari kode ]]></b:skin>
Kalo sudah ketemu, monggo copy script CSS yang berwarna biru di bawah ini, dan paste tepat diatas kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ddd;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ddd;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Setelah itu, cari kode </body>
Kalo sudah ketemu, copy kode javascript yang berwarna biru di bawah ini, dan paste/tempel tepat di atas kode </body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=7;
var displayPageNum=7;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

Simpan perubahan yang dilakukan dengan klik "Save Template"

Demikian topik pagination ini, untuk menjadikan UI nya lebih menggigit, kembangkan kreativitasnya pada script CSS nya. semoga bermanfaat. :)

Sumur :

tipsntriktenan

Ricky Febrian Juli 25, 2017 New Google SEO Bandung, Indonesia

Cara Mudah Membuat Pagination atau Page Number di Blogspot

Cara Mudah Membuat Breadcrumb di Blogspot

Tips membuat breadcrumb di blogspot dengan mudah tanpa ribet dan works tenan. Tapi sebelumnya kita kenali dulu apa itu breadcrumb dan apa fungsinya? Breadcumb adalah salah satu navigasi website atau blogspot yang sangat penting, mirip seperti menu tetapi cara kerjanya searah dan runtut mengikuti kehalaman mana pengunjung berhenti dalam arti breadcrumb selalu mulai dari hompage, kemudian kategori, sub kategori, tanggal sampai ke artikel yang dituju, ini memberitahu pengunjung sedang berada di website atau blog bagian mana dan memudahkan pengunjung dalam mengunjungi halaman yang pernah dikunjungi sebelumnya tanpa harus mulai dari homepage lagi.

Bagaimana, setelah melihat screen shoot diatas apakah sudah ada gambaran? pasti sudah ada yah, kalau ga ada, saya bingung juga mau jelasin seperti apa. :v Mungkin dengan praktik langung bisa lebih memudahkan pemahaman.

Ok, Begini langkah-langkahnya:

Pastikan sudah masuk ke akun blogspot anda, jika belum monggo login dulu. :)
Pilih menu "Template"
Pilih "Edit Template"
Cari kode ]]></b:skin>
Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat diatas kode ]]></b:skin>

.breadcrumbs { margin:0; padding:5px 5px 5px 0; font-size:95%; line-height:1.4em; border-bottom:4px double #a0a0a0; }

Kemudian cari kode <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> Cari yang dibold saja untuk memudahkan pencarian, dan pilih yang pertama jika lebih dari 1. kodenya agak panjang karena saya menggunakan template bawaan blogspot mungkin di template lain berbeda, tapi yang di bold pasti ada kok. o ya, dalam mencari kode jangan lupa gunakan CTRL+F ya. :v
Kalo sudah ketemu, monggo copy script CSS dibawah ini, dan paste tepat dibawah kode <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div> </b:if> </b:if>

Tampilan breadcrumbnya tidak sama dengan yang digambar, karena itu hanya contoh saja. Agar sama seperti digambar agan harus berkreasi di bagian CSS nya saja. Dan akhir kata, demikian artikel Cara Mudah Membuat Breadcrumb di Blogspot kali ini, semoga bermanfaat.

Sumur :

tipsntrickstenan
MasKolis

Ricky Febrian Juli 25, 2017 New Google SEO Bandung, Indonesia

Cara Mudah Membuat Breadcrumb di Blogspot

Autopost To All Facebook Group With Imacros , Delay bisa diatur sesuka hati.

Script hanya bisa menampilkan teks saja , link juga bisa hanya akan jadi link hidup tanpa (preview).
Script ini dijalankan lewat facebook mobile yaitu m.facebook.com , harap login terlebih dahulu sebelum menggunakan script ini ..

Download Script : Autopost Text Facebook Group.iim
Download File Post : IsiPost.csv

Setelah di download jangan lupa pindahkan file Autopost Text Facebook Group.iim ke folder Macros dan file IsiPost.csv ke folder Datasources

Autopost perlu list grup dan file grup .htm, jadi untuk mengambil list grupnya buka link ini https://m.facebook.com/groups/?seemore
Setelah link terbuka, klik kanan dimana saja , lalu pilih Save Page As...

Ubah namanya jadi AllGrup , Save as type pilih seperti gambar di bawah ini

Kembali lagi ke Grup tadi , tekan CTRL + A , lalu Copy

Buka Notepad , Klik kanan lalu Paste

Hapus 7 baris pertama dan 10 baris terakhir

Klik di teks terakhir untuk mengetahui jumlah grup

Save File ke folder Datasources Imacros dengan nama List_Grup.csv

Jika ada error seperti ini, Tekan OK saja

Jangan lupa angka angkanya harus di hapus jika tidak script tidak akan bisa jalan , cara cepatnya gunakan Notepad++ , buka file dengan notepad++ , tekan CTRL+F , pindah ke tab Replace

Isi kolom Find What dengan angka 0 dan Replace With dengan spasi , lalu klik Replace All , ganti nomer sampai angka 9, jika sudah Save lagi file tersebut

Belum selesai, sekarang buka dulu file AllGrup.htm dengan browser kalian dan copy linknya

Selanjutnya Edit dulu file imacrosnya, cari "LINK FILE ALLGRUP.htm" (tanpa tanda kutip) , tekan F3 atau CTRL+F agar lebih mudah , jika sudah ketemu ganti dengan link yang telah di copy tadi

Kemudian Save & Close

Untuk mengganti isi post, silahkan edit File IsiPost.csv yang ada di folder Datasources Imacros tadi. Paragraf Baru ganti dengan <BR> jangan gunakan tanda koma , Oh iya untuk delaynya (jarak postingannya) tinggal ganti angka 30 yang ada di dalam file IsiPost.csv tadi sesuka hati, jangan hapus tanda koma yang telah ada .

Jika ada masalah silahkan berkomentar di bawah.

Tag : autopost, facebook, group, imacros

Sumur

2. Cara Ampuh Auto Join Grup Facebook [Update 2017] Ricky Febrian Juli 21, 2017 New Google SEO Bandung, Indonesia