Cara membuat tombol berbagi pada posting blog

Cara membuat tombol berbagi pada posting blog merupakan artikel blog yang akan saya bahas kali ini dari saya, tampilan tombol share google plus, facebook, twiter, pinterest, bahkan berbagi via email tujuan pembahasan saya. Membuat tampilan blog semenarik mungkin pasti keinginan semua, walaupun tampilan blog yang kita punya belum menarik bagi sebagian banyak orang. Yang pasti kita berusaha membuat menarik bagi kita sendiri. Tampilan tombol berbagi yang saya posting di bawah ini adalah mengubah tampilan tombol berbagi bawaan yang sudah ada dalam blogger itu sendiri, namun di bawah ini akan mengubah model tampilan tombolnya saja, namun tidak mengubah link berbagi bawaan blog itu sendiri. Yang perlu diketahui juga adalah cara yang saya bahas di bawah ini sudah pastinya valid HTML5
Ini dia alur menuju mengubah tampilan tombol berbagi bawaan blogspot

Cara membuat tombol berbagi pada posting blog
No	Alur / cara membuat tombol berbagi
I.	Kalian login / masuk ke blogger
II.	Pilih blog yang ingin kalian ubah tombol share Not"jika memiliki lebih dari satu blogger"
III.	Pilih tata letak blog, edit gadget posting blog, kemudian aktifkan atau conteng tampilkan tombol berbagi, Kemudian save / simpan
IV.	Kemudian pilih pada tema lalu masuk kedalamnya, yaitu edit HTML

Jika sudah berada dalam editan tema blog, maka kini hanya tinggal mencari kode dalam tema blog kalian.
Yang pertama yang harus anda cari adalah b:skin yang ada dalam tema blogger, kemudian tempatkan kode di bawah ini kedalamnya. /* CSS bloggeraneukaceh.blogspot.com */ .tombol-share-fb, .tombol-share-tw, .tombol-share-gp, .tombol-share-pr, .tombol-share-email {float: right; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgckrNwJM86iG4Z-QPR8gVZJhugSS6uBoyrRjwV8Gb-cE7shMQhiyEmHjTBBJ4CJwfY6lkF94zrj5AzQUks0c8z-n2omd0pcGcQgbEG2vnv6G7EyYz8WudkjsZzusM_rzvH2kqu7LUJb5Nd/s1600/icon+blogger+aceh.png) no-repeat; width: 31px; height: 31px; margin: auto; border-radius: 16px;} .tombol-share-naidi a{transition: all 0.07s 0s linear;} .tombol-share-naidi{padding: 5px 0; margin: auto; width: 100%; display: inline-block; text-align: center;}.tombol-share-naidi-fb, .tombol-share-naidi-tw, .tombol-share-naidi-gp, .tombol-share-naidi-pr, .tombol-share-naidi-email{display: inline-block; height: auto; margin: auto; border: solid#DBDBDB 0.1em; border-radius: 16px; min-width: 99px;} .tombol-share-fb-label, .tombol-share-tw-label, .tombol-share-gp-label, .tombol-share-pr-label, .tombol-share-email-label{float: right; margin: auto; padding: 4px;} .tombol-share-fb{background-position: -5px -8px;} .tombol-share-fb:hover{background-position:-5px;} .tombol-share-fb-label{color: #2d609b;} .tombol-share-tw{background-position: -42px -8px;} .tombol-share-tw:hover{background-position: -42px;} .tombol-share-tw-label{color:#00c3f3;} .tombol-share-gp{background-position: -80px -8px;} .tombol-share-gp:hover{background-position: -80px;} .tombol-share-gp-label{color: #f00;} .tombol-share-pr{background-position: -155px -8px;} .tombol-share-pr:hover{background-position: -155px;} .tombol-share-pr-label{color: #ca2027;} .tombol-share-email{background-position: -378px -8px;} .tombol-share-email:hover{background-position: -378px;} .tombol-share-email-label{color: #a6a9ac;}Atau bisa jugak menempat kode ini di dalam head dengan memakai sistem Css.<style type="text/css">.Tempatkan kode diatas disini...</style>Setelah selesai kemudian tahab kedua adalah mencari kembali kode yang ini<b:includable id='shareButtons' var='post'>Untuk mempermudah klik ctrl + f isikan kode yang ingin di cari, jika sudah maka ubah kode di dalamnya menjadi seperti di bawah ini <div class='tombol-share-naidi'><b:if cond='data:top.showFacebookButton'><div class='tombol-share-naidi-fb'><a class='tombol-share-fb' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"javascript:window.open(this.href, \"_blank\", \"menubar=no,toolbar=no,scrollbars=yes,resizable=yes,height=600,width=600\"); return false;"' expr:title='data:top.shareToFacebookMsg' rel='noopener'></a><span class='tombol-share-fb-label'>Share To</span></div></b:if><b:if cond='data:top.showTwitterButton'><div class='tombol-share-naidi-tw'><a class='tombol-share-tw' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:onclick='"javascript:window.open(this.href, \"_blank\", \"menubar=no,toolbar=no,scrollbars=yes,resizable=yes,height=600,width=600\"); return false;"' expr:title='data:top.shareToTwitterMsg' rel='noopener'></a><span class='tombol-share-tw-label'>Share To</span></div></b:if><b:if cond='data:top.showPlusOne'><div class='tombol-share-naidi-gp'><a class='tombol-share-gp' expr:href='data:post.sharePostUrl + "&target=googleplus"' expr:onclick='"javascript:window.open(this.href, \"_blank\", \"menubar=no,toolbar=no,scrollbars=yes,resizable=yes,height=600,width=600\"); return false;"' rel='noopener' title='Share To Google plus'></a><span class='tombol-share-gp-label'>Share To</span></div></b:if><b:if cond='data:top.showPinterestButton'><div class='tombol-share-naidi-pr'><a class='tombol-share-pr' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:onclick='"javascript:window.open(this.href, \"_blank\", \"menubar=no,toolbar=no,scrollbars=yes,resizable=yes,height=600,width=600\"); return false;"' expr:title='data:top.shareToPinterestMsg' rel='noopener'></a><span class='tombol-share-pr-label'>Share To</span></div></b:if><b:if cond='data:top.showEmailButton'><div class='tombol-share-naidi-email email'><a class='tombol-share-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:onclick='"javascript:window.open(this.href, \"_blank\", \"menubar=no,toolbar=no,scrollbars=yes,resizable=yes,height=600,width=600\"); return false;"' expr:title='data:top.emailThisMsg' rel='noopener'></a><span class='tombol-share-email-label'>Send To</span></div></b:if></div>Setelah kedua tahab selesai kemudian save / simpan tema blog kalian kemudian lihat hasilnya. Untuk mengetahui tampilan tombol share / berbagi ini bisa di lihat pada tampilan tombol berbagi yang saya pakai di bawah posting ini. Hanya ini yang bisa saya jadikan posting blog malam ini dari saya, ambil yang berguna komentari dimana ada kekurangan.

Tag: Share › Google plus › Facebook

• Tweet

Judul: Cara membuat tombol berbagi pada posting blog
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Unknown 02:53

Artikel Terkait Blogger, Share, template :