Home / Tips Blogging
Tampilkan postingan dengan label Tips Blogging. Tampilkan semua postingan
Tampilkan postingan dengan label Tips Blogging. Tampilkan semua postingan

Cara Membuat Kolom Komentar Facebook pada Blog Model Tab

Untuk bisa mempercantik tampilan blog dan membuatnya beda dari yang lain cobalah cara berikut ini .
Saya akan menjelaskan tentang Cara Membuat Kolom Komentar Facebook pada Blog Model Tab.

 Membuat Blog semanarik mungkin adalah keinginan para blogger. Semuanya bertujuan agar blog tersebut disukai dan disenangi dari segi design dan tata letak. Sehingga, penampilan dari blog tersebut bisa menarik perhatian para pengunjung blog. Tidak ketinggalan juga mempercantik tampilan kolom komentar pada blog. Memasang Kolom Komentar Facebook dan Blog secara bersamaan merupakan salah satu cara mempercantik tampilan blog, khususnya tampilan postingan / artikel yang ada pada blog tersebut. Dimana Komentar-komentar dari pengunjung seakan-akan disembunyikan, dan komentar-komentar tersebut akan terlihat kembali apabila kita memilih berdasarkan Facebook atau Blog, bukan sepenuhnya dihilangkan (komentar tetap ada selama tidak kita hapus). Tujuannya adalah agar tampilan isi postingan terlihat ramping dan jelas (Apabila komentar artikel banyak loh).



Inilah Cara Membuat Kolom Komentar Facebook pada Blog Model Tab Langkah-langkah yang harus dilakukan adalah sebagai berikut:
1. Tentunya seperti biasa anda harus membuka akun blogger anda sendiri.
2. Pada Dasbor blog anda, masuk elemen Template, Lalu pilih Edit HTML
3. Cari Kode : <div class='comments' id='comments'>
4. Copy atau salin Kode Script yang tertera di bawah ini, dan selanjunya
Pastekan tepat di bawah Kode : <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made
with Facebook'>
<img class='comments-tab-icon'
src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments
from Blogger'>
<img class='comments-tab-icon'
src='http://www.blogger.com/img/icon_logo32.gif'/>
<data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta
content='IDFANPAGEFACEBOOK' property='fb:admins'/><script
type='text/javascript'>function commentToggle(selectTab) {$(".comments-
tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-
select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}
</script>
<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-
page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding:
5px; margin-right: 3px; cursor: pointer; background-color:
#f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right:
3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab
{ background-color: #d1d1d1;}</style>
5. Apabila sudah selesai, Simpanlah Template Blog anda.
6. Lihat hasilnya.
Catatan:

  • Ganti IDFANPAGEFACEBOOK dengan Kode / No / Id Fan Page Facebook yang anda punya. cara melihat IDFANPAGEFACEBOOK adalah: Masuklah ke Halaman Facebook Anda, lalu masuk lagi ke Pengaturan, Lihat Info Halaman, lalu lihat paling bawah sekali ada tulisan ID Halaman Facebook : 10026565009xxxx 
  • Anda tidak punya Halaman Facebook saat ini? Anda tidak perlu mengganti tulisan IDFANPAGEFACEBOOK di atas (saran sih gunakan Halaman Facebook) abaikan saja. Gunakan saja Kode Script di atas apa adanya. 
  • Ukuran atau panjang Kolomo Komentar FB sesuaikan dengan Ukuran Blog anda. Silahkan ganti angka yang berwana Ungu di atas. (width='550') 
  • Apabila kode <div class='comments' id='comments'> ada 2, pilih saja salah satu. 


Demikian artikel tentang Cara Membuat Kolom Komentar Facebook pada Blog Model Tab 
Selamat mencoba
Terima kasih ,

Cara Membuat Menu Dropdown Responsive di Blog Mudah dan Keren

Bentuk penampilan menu drowndown pada blog yang indah dan keren akan mempengaruhi pembaca agar bisa betah dalam mengunjungi blog anda. Tapi tidak hanya untuk keren- kerenan saja menu dropdown juga harus responsive .

Bentuk dropdown yang akan saya jelaskan sekarang adalah menu dropdown yang sudah dimodifikasi sedemikian rupa sehingga menjadi responsive dan ditambah kotak pencarian untuk mempermudah pengunjung mencari artikel pada blog anda.


Cara Membuat Menu Dropdown Responsive dan kotak pencarian di Blog 

1. Masuklah ke dashbor blogger anda

2. Pilih Blog yang akan anda gunakan

3. Pilih "Template" kemudian "Edit HTML"


4. Salin dan letakan kode berikut tepat diatas ]]</b:skin> atau ]]></b:skin>, anda bis mempercepat pencarian menggunakan Ctrl + F 
nav{text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;background:#e74c3c}nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none}nav ul{overflow:hidden;background:rgba(231,76,60,0.84);float:left}nav li{float:left;display:inline}nav li a{padding:3px 15px;line-height:40px;color:#fff!important;display:block;text-decoration:none}nav li a:hover{background:rgba(231,76,60,0.84)!important}nav li ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s}nav li li{display:block;float:none;width:100%}nav li:hover > ul{visibility:visible;width:200px;opacity:1}nav li li ul{left:200px;margin-top:-40px}nav li.sub > a{position:relative;padding-right:30px}nav li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px}nav li.sub li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px}
5. Untuk bisa menjadikannya responsive , anda harus menambahkan media query kedalam template anda . ada terdapat dua media query yaitu pada ukuran 600px dan 380px. Letakanlah media query ini sesuai dengan media query yang ada pada template anda .anda bisa meletakan kode berikut tepat diatas ]]</b:skin> atau ]]></b:skin> 
@media screen and (max-width:600px){#nav2{display:inherit;margin:5px;float:left;padding:8px}nav ul{display:none}} @media screen and (max-width:380px){#nav2{padding:3px}#search-top{padding:5px}input[type="text"]{padding:5px;width:90px}#search-button-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;transition:all 0.7s ease 0s;height:26px;width:29px;background-color:#34495e;background-position:7px -247px;border:none;float:right;cursor:pointer}}}
6. Letakanlah kode berikut sesuai yang anda inginkan , ini adalah kode dimana menu dropdown akan ditampilkan . saya akan meletakannya dibawah Header

<nav><ul><li><a href="/search/label/Tutorial">Tutorial</a></li><li class="sub"><a href="/search/label/Template">Template</a><ul><li><a href="/search/label/CSS3">CSS3</a></li><li><a href="/search/label/HTML5">HTML5</a></li><li><a href="/search/label/Responsive">Responsive</a></li><li><a href="/search/label/SEO">SEO</a></li></ul></li></ul><select class="nav2" id="nav2" onchange="document.location.href=this.options[this.selectedIndex].value;"><option value="/">Home</option><option value="/search/label/Tutorial">Tutorial</option><option value="/search/label/Template">Template</option><option value="/search/label/CSS3">- CSS3</option><option value="/search/label/HTML5">- HTML5</option><option value="/search/label/Responsive">- Responsive</option><option value="/search/label/SEO">- SEO</option></select><form action="/search" id="search-top" method="get"><input name="q" placeholder="Search..." type="text"/><input id="search-button-top" type="submit" value=""/></form></nav>
7. Pilih "Simpan Template" untuk menyimpan perubahan

8. Selesai

Selamat akhirnya menu dropdown responsive yang anda impikan tercapai. semoga dengan merubah menu dropdown responsive ini anda akan lebih bersemangat lagi dalam berkarya membuat artikel dan blog anda menjadi ramai pengunjung .

Demikian artikel tentang Cara Membuat Menu Dropdown Responsive di bawah Header 
Semoga bermanfaat . jangan lupa untuk share
Terimakasih :)



Cara BackUp Semua Data pada Blog Anda dengan Mudah

Semua data postingan yang anda miliki di blog merupakan sesuatu yang berharga. karena setiap artikel yang anda tulis adalah hasil atau ide dari diri anda sendiri. Untuk menghindari hal buruk yang tidak diinginkan pada blog anda contohnya jika blog anda di hapus oleh pihak google maupun oleh orang lain , anda harus membackup semua data pada blog anda agar semua artikel yang anda miliki aman.
Bagaimana cara membackup semua data pada blog?
Sebenarnya fitur backup ini sudah disediakan oleh pihak google, sehingga anda dapat dengan mudah menyimpan semua data agar sewaktu waktu bisa digunakan untuk membuat blog baru (mengimport data) . Tanpa basa-basi langsung saja inilah caranya .


Cara BackUp Semua Data pada Blog Anda dengan Mudah


1. Masuklah ke Dashbor blog anda 

2. Pilih blog yang akan anda backup

3. Pilih menu "Setelan" kemudian "Lainnya" kemudian pilih "Cadangkan Konten" 

Cara BackUp Semua Data pada Blog Anda dengan Mudah


4. Setelah muncul pop up pilih "Simpan ke komputer" 

Cara BackUp Semua Data pada Blog Anda dengan Mudah


5. Selesai 

Bagaimana mudah kan? sebaiknya anda membackup semua data yang ada pada blog anda agar menjadi lebih aman sehingga dapat menghindari hal yang diinginkan terjadi pada blog anda . 

Demikian tentang Cara BackUp Semua Data pada Blog Anda dengan Mudah 
jika ada yang belum jelas bisa di tanyakan pada kolom komentar 
terimakasih jangan lupa share ya :)
Langganan: Postingan (Atom)