Cara Memasang Auto Read More With Sosial share di Home page Blogger - Mungkin kalian pernah melihat pada home page sebuah blog yang terdapat menu auto read more pada Home page dan mungkin kalian melihat home page dari template blog saya yang memiliki auto read more dengan sosial share yang telah saya terapkan pada template saya mungkin kalian tertarik untuk manerapkanya pada blog kalian sendiri . Mungkin banyak tutorial di google akan tetapi semua tutorial nampak sama dan mungkin kalian ingin memasang auto readmore tersebut dengan sosial share juga agar terlihat berbeda dengan blog atau website yang lain oleh karena itu kalian tidak salah untuk mampir ke sini .
mungkin kalian pernah melihat blog atau web seseorang yang pada home pagenya terdapat artikel yang terputus oleh karena itu jika kita ingin melanjutkanya maka kita di minta untuk mengklik Read More atau Lihat Selengkapnya untuk melihat artikel secara detail .Tujuan dari pemasangan readmore (summary post) ini sendiri bertujuan untuk menghemat ruang halaman homepage blog sehingga tampilan homepage akan tampak rapi , sebenarnya walaupun kita tidak memasang auto read more pada tampilan home page tidak akan berpengaruh karena mungkin setiap template sudah terpadang agar snippets terlihat ramping .
lantas bagaimana memasang Auto read more dengan Sosial share itu ke blog ?
Berikut Cara memasang Auto read more With Sosial share di post hentry Blog
langkah pertama seperti biasa yaitu login ke dalam blog kalian dan silahkan cari menu Template pada dashboard blogger tersebut setelah kalian menemukanya silahkan klik edit HTML pada menu template tersebut agar lebih jelasnya lagi kalian bisa lihat pada contoh gambar yang telah saya ambil berikut .
Mungkin tampak aneh pada tutorial saya kali ini karena untuk memasang Auto read more deangan sosial share ini tidak menggunakan Javascript atau apalah seperti umumnhya pada setiap tutorial pemasangan auto read more sangat di butuhkan dalam pemasangan javascript , pada tutorial saya kali ini kita tidak harus memasang javascript atau apalah pada template kita karena kita cukup memasang CSS dan HTMLnya saja memang sangat simple dan tampak tidak susah dan berikut cara memasangnya .
1. setelah kita mengklik Edit HTML tadi maka akan nampak sekumpulan Kode-kode dalam template yang telah membentuk template kalian ,setelah itu silahkan cari kode ]]></b:skin> pada template kalian tadi , jika tidak ingin repot mencari dengan manual untuk cara yang lebih cepatnya silahkan takan keyword kalian dengan menekan Ctrl+F secara bersamaan dan cari kode ]]></b:skin> tadi maka anan otomatis dengan cepat kode tersebut ketemu , kemudian salin kode di bawah ini tepat sebelum kode ]]></b:skin> tersebut atau kalian bisa memasang Css di bawah ini di bawah kode <Style> .
.share-post ul {padding:0;margin:0;line-height: 1.4;float:left;}
.share-post li{list-style: none; display: inline-block; margin-right: 10px; background: #eee; width: 40px; height: 39px; line-height: 40px; border-radius: 100px;}
.share-post li a{display: block; text-align: center; color: #009688; font-weight: 600;}
li.readmore2{list-style: none; display: inline-block; margin-right: 2px; background: #eeeeee; width: 90px; height: 38px; line-height: 52px; transition: box-shadow .25s; float: right;border-radius: initial;}
li.readmore2:hover, .share-post li:hover, #blog-pager a:hover {box-shadow: 0 1px 4px #AFAFAF;transition: box-shadow .25s;}
Keterangan :
width: 40px; height: 39px; (ukuran besar kecil dan tinggunya menu auto read more dan sosial sharenya )
border-radius: 100px; (jika menu sosial share tersebut tidak ingin bulat silahkan hapus Border radius yang telah saya beri warna merah tersebut .
color: #009688; (Color tersebut merupakan warna pada Icon Font awesomenya jika tidak ingin warna font awesomenya berwarna hijau maka silahkan ganti dengan warna yang kamu mau .
background: #eeeeee; (Background pada auto readmore dan Sosial share tersebut berwarna abu-abu jika ingin menggantinya silahkan ganti dengan warna yang di sukai .
2. Setelah itu silahkan cari kode <div expr:id='"summary" + data:post.id'><data:post.body/></div> Kode tersebut terletak dalam kode <div class='post-header'> silahkan cari kode tersebut pada template kalian ,
Apa mungkin ada ?
tenang aja kode tersebut pasti ada kok tapi mungkin akan berbeda beda .
jika kalian kenemukan kode di atas yang tentunya terdapat dalam kode <div class='post-header'> maka tidak salah lagi itu adalah kodenya , agar tidak bingung silahkan lihat contoh gambar berikut .
Jika sudah Jelas silahkan salin kode di bawah ini dan pastekan kodenya tepat di bawah kode <div expr:id='"summary" + data:post.id'><data:post.body/></div> tersebut .
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li class='facebook_share'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
</li>
<li class='twitter_share'>
<a expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
</ul>
<li class='readmore2'>
<a expr:href=' data:post.url' title='read more'><i aria-hidden='true' class='fa fa-ellipsis-h fa-2x'/></a></li>
</div>
Setelah kalian memasang HTML di atas maka akan nampak seperti gambar di bawah ini dan jika kalian sudan menerapkanya maka silahkan save dan lihat hasilnya pada blog kalian .
Bagaimana mudah bukan ? mohon maaf jika kode yang di cari seperti tutorial di atas tidak ada , dan mungkin berbeda karena saya juga belum bisa menemukanya maksud saya belum menemuka cara yang sama seperti tutorial umum yaitu tutorial dalam pemasangan Auto readmore tersebut , jika anda berhasil memasangnya dan jika anda tidak berat untuk Like artikel saya ini dan silahkan berkomentar pada kolom komentar yang telah saya sediakan di bawah .
0 komentar