Membuat Widget Info About Us dengan Show Hide di Blog
05 November 2015
Membuat Widget Info About Us dengan Show Hide - Kali ini saya akan membagikan sebuah widget Info About Us atau sebuah Box yang menampilkan foto pemilik blog, jumlah artikel yang di publish, deskripsi blog/tentang blog dan Sosial Media simple di samping kanannya. Widget box keren ini saya dapatkan dari blog indzign.blogspot.com.
Widget yang menampilkan Tentang blog itu penting karena pengunjung bisa dengan mudah mengetahui isi dan tema blog tersebut. Dan menu pada samping kanan / Sosial media juga bisa untuk sarana pengunjung agar bisa lebih dekat dan berkomunikasi dengan Pemilik blog.
Bagi sobat yang ingin memasang widget keren ini silahkan ikuti tutorial di bawah ini :
1. Buka Blogger.com > Template > Edit HTML > Lalu letakan CSS di bawah ini tepat di atas
1. Buka Blogger.com > Template > Edit HTML > Lalu letakan CSS di bawah ini tepat di atas
]]></b:skin> atau </style>/* CSS Widget Info About Us */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}
kepala{background:#de9b31;height:50px;width:100%;position:inherit}
#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:58.4%;box-sizing:initial;}
#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#bdc3c7;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}
.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}
a.popup-close:hover{color:#fff}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}
.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}
li.infoindzign{border:0;float:right;list-style:none}
li.infoindzign a{background:#f39c12;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-family:'Roboto Condensed';transition:background-color .3s}
i.infoindzign a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
2. Letakan kode HTML di bawah ini tepat di bawah kode
<body> atau <body. (tanpa titik) Klik Ctrl + F pada Keyboard untuk mempermudah pencarian.<li class='infoindzign'><a class='popup-link' href='#popup'>Info</a></li>
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
<div class='contentbox'>
<kepala><span id='textlogo'><data:blog.title/></span>
<a class='popup-close' href='#closed' title='Close'>×</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img expr:alt='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxj_wXKw3RbcRLt4pN_5eD0bRhwf5qDqAsKRn8WhzWz5hdZEdulvBpj8tYteilB1TTeJqX0qMARgXQJHD8c5aCDkM_lf31aeddY2tpbnaH4R33W2VPU-Eb-7g3D8JS77EDJ2U_djfITSY/s1600/indzign.jpg ' expr:title='data:blog.title'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&callback=getposts'></script><br/><br/>
Deskripsi Tentang Blog anda Disini.
</div></div></div>
<div id='left'>
<div class='taber1'><a href='/' rel='nofollow' target='_blank' expr:title='data:blog.title'><data:blog.title/></a></div>
<div class='taber2'><a href='# ' rel='nofollow' target='_blank' title='Follow Us On Google+'>Google+</a></div>
<div class='taber3'><a href='# ' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div>
<div class='taber4'><a href='# ' rel='nofollow' target='_blank' title='Follow Us On Twitter'>Twitter</a>
</div>
<div class='taber6'><a href='# ' rel='nofollow' target='_blank' title='Follow Us On Codepen'>Codepen</a></div>
<div class='taber7'><a href='# ' rel='nofollow' target='_blank' title='Join this blog'>Join this blog</a></div>
</div></div></div></div></div>
Note : Jika Sobat ingin memindahkan button untuk menampilkan Widgetnya, sobat hanya tinggal menambahkan #popup pada href. Contoh :
3. Letakan Script di bawah ini tepat di atas kode
href='#popup' jika sudah dan tidak ingin menampilkan button originalnya sobat tinggal menghapus kode berikut : <li class='infoindzign'><a class='popup-link' href='#popup'>Info</a></li>3. Letakan Script di bawah ini tepat di atas kode
</head> atau </body><script type='text/javascript'>
//<![CDATA[
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');}
//]]>
</script>
Simpan Template dan Lihat hasilnya.
Semoga Tutorial "Cara Membuat Widget Info About Us dengan Show Hide di Blog" ini bermanfaat..
Terima Kasih...
Terima Kasih...