Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger

Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger - Hallo sahabat firmware, Pada Artikel yang anda baca kali ini dengan judul Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel css, Artikel Html Blog, Artikel Template, Artikel Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger
link : Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger

Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger

Cara Memasang Auto Read More With Sosial share di Home page Blogger - Mungkin kalian pernah melihat pada home page sebuah blog yang terdapat sajian auto read more pada Home page dan mungkin kalian melihat home page dari template blog aku yang mempunyai auto read more dengan sosial share yang telah aku terapkan pada template aku  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 biar terlihat berbeda dengan blog atau website yang lain oleh sebab 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 sebab itu jikalau 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 , bekerjsama walaupun kita tidak memasang auto read more  pada tampilan home page tidak akan besar lengan berkuasa sebab mungkin setiap template sudah terpadang biar 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 sajian Template pada dashboard blogger tersebut sesudah kalian menemukanya silahkan klik edit HTML pada sajian template tersebut biar lebih jelasnya lagi kalian sanggup lihat pada pola gambar yang telah aku ambil berikut .

Mungkin tampak asing pada tutorial aku kali ini sebab untuk memasang Auto read more deangan sosial share ini tidak memakai Javascript atau apalah menyerupai umumnhya pada setiap tutorial pemasangan auto read more sangat di butuhkan dalam pemasangan javascript , pada tutorial aku kali ini kita tidak harus memasang javascript atau apalah pada template kita sebab kita cukup memasang CSS dan HTMLnya saja memang sangat simple dan tampak tidak susah dan berikut cara memasangnya .

1. sesudah kita mengklik Edit HTML tadi maka akan nampak sekumpulan Kode-kode dalam template yang telah membentuk template kalian ,setelah itu silahkan cari arahan ]]></b:skin> pada template kalian tadi , jikalau tidak ingin repot mencari dengan manual untuk cara yang lebih cepatnya silahkan takan keyword kalian dengan menekan Ctrl+F secara bersamaan dan cari arahan ]]></b:skin> tadi maka anan otomatis dengan cepat arahan tersebut ketemu , lalu salin arahan di bawah ini sempurna sebelum arahan ]]></b:skin> tersebut atau kalian sanggup memasang Css di bawah ini di bawah arahan <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 sajian sosial share tersebut tidak ingin bundar silahkan hapus Border radius yang telah aku beri warna merah tersebut .

color: #009688;  (Color tersebut merupakan warna pada Icon Font awesomenya jikalau tidak ingin warna font awesomenya berwarna hijau maka silahkan ganti dengan warna yang kau mau .

 background: #eeeeee;  (Background pada auto readmore dan Sosial share tersebut berwarna abu-abu jikalau ingin menggantinya silahkan ganti dengan warna yang di sukai .

2. Setelah itu silahkan cari kode <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> Kode tersebut terletak dalam kode <div class='post-header'> silahkan cari arahan tersebut pada template kalian , 

Apa mungkin ada ? 

tenang aja arahan tersebut niscaya ada kok tapi mungkin akan berbeda beda .

jika kalian kenemukan arahan di atas yang tentunya terdapat dalam arahan <div class='post-header'> maka tidak salah lagi itu ialah kodenya , biar tidak resah silahkan lihat pola gambar berikut .  

Jika sudah Jelas silahkan salin arahan di bawah ini dan pastekan kodenya sempurna di bawah arahan <div expr:id='&quot;summary&quot; + 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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;https://plus.google.com/share?url=&quot; + 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 menyerupai gambar di bawah ini dan jikalau kalian sudan menerapkanya maka silahkan save dan lihat kesannya pada blog kalian .

Bagaimana gampang bukan ? mohon maaf jikalau arahan yang di cari menyerupai tutorial di atas tidak ada , dan mungkin berbeda sebab aku juga belum sanggup menemukanya maksud aku belum menemuka cara yang sama menyerupai tutorial umum yaitu tutorial dalam pemasangan Auto readmore tersebut , jikalau anda berhasil memasangnya dan jikalau anda tidak berat untuk Like artikel aku ini dan silahkan berkomentar pada kolom komentar yang telah aku sediakan di bawah .

Demikianlah Artikel Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger

Sekianlah artikel Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Memasang Auto Read More With Sosial Share Di Home Page Blogger dengan alamat link https://filefirmware.blogspot.com/2013/11/cara-memasang-auto-read-more-with.html

Share this post